Mostrar mapas con vistas 2D, 3D y Streetside
Importante
Retirada del servicio Bing Maps for Enterprise
Los servicios MapControl y map de UWP del espacio de nombres Windows.Services.Maps se basan en Mapas de Bing. Bing Maps for Enterprise está en desuso y se retirará, momento en el que los servicios y MapControl ya no recibirán datos.
Para obtener más información, consulte la documentación del Centro para desarrolladores de Mapas de Bing y Mapas de Bing. Puede mostrar un mapa en una ventana descartable de luz denominada tarjeta de posición de mapa o en un control de mapa completo.
Descargue el ejemplo de mapa para probar algunas de las características descritas en esta guía.
Mostrar mapa en una tarjeta de posición
Puede mostrar a los usuarios un mapa dentro de una ventana emergente ligera encima, debajo o al lado de un elemento de la interfaz de usuario o un área de una aplicación donde el usuario toca. El mapa puede mostrar una ciudad o dirección relacionada con la información de la aplicación.
Este cuadro de posición muestra la ciudad de Seattle.
Este es el código que hace que Seattle aparezca en un cuadro de posición debajo de un botón.
private void Seattle_Click(object sender, RoutedEventArgs e)
{
Geopoint seattlePoint = new Geopoint
(new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 });
PlaceInfo spaceNeedlePlace = PlaceInfo.Create(seattlePoint);
FrameworkElement targetElement = (FrameworkElement)sender;
GeneralTransform generalTransform =
targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);
Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
(targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));
spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}
Esta tarjeta de posición muestra la ubicación de Space Needle en Seattle.
Este es el código que hace que space Needle aparezca en una tarjeta de posición debajo de un botón.
private void SpaceNeedle_Click(object sender, RoutedEventArgs e)
{
Geopoint spaceNeedlePoint = new Geopoint
(new BasicGeoposition { Latitude = 47.6205, Longitude = -122.3493 });
PlaceInfoCreateOptions options = new PlaceInfoCreateOptions();
options.DisplayAddress = "400 Broad St, Seattle, WA 98109";
options.DisplayName = "Seattle Space Needle";
PlaceInfo spaceNeedlePlace = PlaceInfo.Create(spaceNeedlePoint, options);
FrameworkElement targetElement = (FrameworkElement)sender;
GeneralTransform generalTransform =
targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);
Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
(targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));
spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}
Mostrar mapa en un control
Usa un control de mapa para mostrar datos de mapa enriquecidos y personalizables en tu aplicación. Un control de mapa puede mostrar mapas de carreteras, aéreos, 3D, vistas, direcciones, resultados de búsqueda y tráfico. En un mapa, puede mostrar la ubicación, las direcciones y los puntos de interés del usuario. Un mapa también puede mostrar vistas aéreas 3D, vistas de Streetside, tráfico, tránsito y empresas locales.
Usa un control de mapa cuando quieras un mapa dentro de la aplicación que permita a los usuarios ver información geográfica general o específica de la aplicación. Tener un control de mapa en la aplicación significa que los usuarios no tienen que ir fuera de la aplicación para obtener esa información.
Nota:
Si no le importa que los usuarios salgan de la aplicación, considere la posibilidad de usar la aplicación Mapas de Windows para proporcionar esa información. La aplicación puede iniciar la aplicación Mapas de Windows para mostrar mapas, indicaciones y resultados de búsqueda específicos. Para obtener más información, consulta Iniciar la aplicación Mapas de Windows.
Adición de un control de mapa a la aplicación
Para mostrar un mapa en una página XAML, agregue un MapControl. Para usar MapControl, debes declarar el espacio de nombres Windows.UI.Xaml.Controls.Maps en la página XAML o en el código. Si arrastra el control desde el cuadro de herramientas, esta declaración de espacio de nombres se agrega automáticamente. Si agregas mapControl a la página XAML manualmente, debes agregar manualmente la declaración de espacio de nombres en la parte superior de la página.
En el ejemplo siguiente se muestra un control de mapa básico y se configura el mapa para mostrar los controles de zoom e inclinación, además de aceptar entradas táctiles.
<Page
x:Class="MapsAndLocation1.DisplayMaps"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MapsAndLocation1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d">
<Grid x:Name="pageGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Maps:MapControl
x:Name="MapControl1"
ZoomInteractionMode="GestureAndControl"
TiltInteractionMode="GestureAndControl"
MapServiceToken="EnterYourAuthenticationKeyHere"/>
</Grid>
</Page>
Si agrega el control de mapa en el código, debe declarar el espacio de nombres manualmente en la parte superior del archivo de código.
using Windows.UI.Xaml.Controls.Maps;
...
// Add the MapControl and the specify maps authentication key.
MapControl MapControl2 = new MapControl();
MapControl2.ZoomInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.TiltInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.MapServiceToken = "EnterYourAuthenticationKeyHere";
pageGrid.Children.Add(MapControl2);
Obtención y establecimiento de una clave de autenticación de mapas
Para poder usar MapControl y los servicios de mapa, debe especificar la clave de autenticación de mapas como el valor de la propiedad MapServiceToken. En los ejemplos anteriores, reemplace por EnterYourAuthenticationKeyHere la clave que obtiene del Centro para desarrolladores de Mapas de Bing. El texto Advertencia: MapServiceToken no especificado sigue apareciendo debajo del control hasta que especifique la clave de autenticación de mapas. Para obtener más información sobre cómo obtener y establecer una clave de autenticación de mapas, consulta Solicitar una clave de autenticación de mapas.
Establecer la ubicación de un mapa
Apunte el mapa a cualquier ubicación que desee o use la ubicación actual del usuario.
Establecer una ubicación inicial para el mapa
Establezca la ubicación que se va a mostrar en el mapa especificando la propiedad Center de MapControl en el código o enlazando la propiedad en el marcado XAML. En el ejemplo siguiente se muestra un mapa con la ciudad de Seattle como centro.
Nota:
Dado que una cadena no se puede convertir en un punto geográfico, no se puede especificar un valor para la propiedad Center en el marcado XAML a menos que use el enlace de datos. (Esta limitación también se aplica a Propiedad adjunta MapControl.Location ).
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// Specify a known location.
BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 47.604, Longitude = -122.329 };
Geopoint cityCenter = new Geopoint(cityPosition);
// Set the map location.
MapControl1.Center = cityCenter;
MapControl1.ZoomLevel = 12;
MapControl1.LandmarksVisible = true;
}
Establecer la ubicación actual del mapa
Para que la aplicación pueda acceder a la ubicación del usuario, la aplicación debe llamar al método RequestAccessAsync. En ese momento, la aplicación debe estar en primer plano y se debe llamar a RequestAccessAsync desde el subproceso de la interfaz de usuario. La aplicación no puede tener acceso a los datos de ubicación hasta que el usuario conceda permiso.
Obtenga la ubicación actual del dispositivo (si la ubicación está disponible) mediante el método GetGeopositionAsync de la clase Geolocator. Para obtener el punto geográfico correspondiente, utilice la propiedad Point de la geocoordinación de la geoposición. Para obtener más información, consulta Obtener la ubicación actual.
// Set your current location.
var accessStatus = await Geolocator.RequestAccessAsync();
switch (accessStatus)
{
case GeolocationAccessStatus.Allowed:
// Get the current location.
Geolocator geolocator = new Geolocator();
Geoposition pos = await geolocator.GetGeopositionAsync();
Geopoint myLocation = pos.Coordinate.Point;
// Set the map location.
MapControl1.Center = myLocation;
MapControl1.ZoomLevel = 12;
MapControl1.LandmarksVisible = true;
break;
case GeolocationAccessStatus.Denied:
// Handle the case if access to location is denied.
break;
case GeolocationAccessStatus.Unspecified:
// Handle the case if an unspecified error occurs.
break;
}
Al mostrar la ubicación del dispositivo en un mapa, considere la posibilidad de mostrar gráficos y establecer el nivel de zoom en función de la precisión de los datos de ubicación. Para obtener más información, consulta Directrices para aplicaciones compatibles con la ubicación.
Cambiar la ubicación del mapa
Para cambiar la ubicación que aparece en un mapa 2D, llame a una de las sobrecargas del método TrySetViewAsync. Use ese método para especificar nuevos valores para Center, ZoomLevel, Heading y Pitch. También puede especificar una animación opcional que se usará cuando cambie la vista proporcionando una constante de la enumeración MapAnimationKind.
Para cambiar la ubicación de un mapa 3D, use el método TrySetSceneAsync en su lugar. Para obtener más información, consulta Visualización de vistas aéreas 3D.
Llame al método TrySetViewBoundsAsync para mostrar el contenido de un GeoboundingBox en el mapa. Use este método, por ejemplo, para mostrar una ruta o una parte de una ruta en el mapa. Para obtener más información, consulta Mostrar rutas e indicaciones en un mapa.
Cambiar la apariencia de un mapa
Para personalizar la apariencia del mapa, establezca la propiedad StyleSheet del control de mapa en cualquiera de los objetos MapStyleSheet existentes.
myMap.StyleSheet = MapStyleSheet.RoadDark();
También puede usar JSON para definir estilos personalizados y, a continuación, usar ese JSON para crear un objeto MapStyleSheet.
Json de hoja de estilos se puede crear de forma interactiva mediante la aplicación Editor de hojas de estilos de mapa.
myMap.StyleSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""settings"": {
""landColor"": ""#FFFFFF"",
""spaceColor"": ""#000000""
},
""elements"": {
""mapElement"": {
""labelColor"": ""#000000"",
""labelOutlineColor"": ""#FFFFFF""
},
""water"": {
""fillColor"": ""#DDDDDD""
},
""area"": {
""fillColor"": ""#EEEEEE""
},
""political"": {
""borderStrokeColor"": ""#CCCCCC"",
""borderOutlineColor"": ""#00000000""
}
}
}
");
Para obtener la referencia de entrada JSON completa, consulte Referencia de hoja de estilos de mapa.
Puede empezar con una hoja existente y, a continuación, usar JSON para invalidar los elementos que desee. En este ejemplo, comienza con un estilo existente y usa JSON para cambiar solo el color de las áreas de agua.
MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""elements"": {
""water"": {
""fillColor"": ""#DDDDDD""
}
}
}
");
MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();
myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });
Nota:
Los estilos que defina en la segunda hoja de estilos invalidan los estilos en el primero.
Establecer orientación y perspectiva
Acercar, alejar, girar e inclinar la cámara del mapa para obtener solo el ángulo correcto para el efecto que desee. Pruebe estas propiedades.
- Establezca el centro del mapa en un punto geográfico estableciendo la propiedad Center .
- Establezca el nivel de zoom del mapa estableciendo la propiedad ZoomLevel en un valor entre 1 y 20.
- Establezca la rotación del mapa estableciendo la propiedad Heading , donde 0 o 360 grados = Norte, 90 = Este, 180 = Sur y 270 = Oeste.
- Establezca la inclinación del mapa estableciendo la propiedad DesiredPitch en un valor entre 0 y 65 grados.
Mostrar y ocultar características de mapa
Muestre u oculte características de mapa como carreteras y puntos de referencia estableciendo los valores de las siguientes propiedades de MapControl.
Para mostrar edificios y puntos de referencia en el mapa, habilite o deshabilite la propiedad LandmarksVisible.
Nota:
Puede mostrar u ocultar edificios, pero no puede impedir que aparezcan 3 dimensiones.
Muestra características peatonales como escaleras públicas en el mapa habilitando o deshabilitando la propiedad PedestrianFeaturesVisible.
Para mostrar el tráfico en el mapa, habilite o deshabilite la propiedad TrafficFlowVisible.
Especifique si la marca de agua se muestra en el mapa estableciendo la propiedad WatermarkMode en una de las constantes MapWatermarkMode.
Para mostrar una ruta de conducción o caminar en el mapa, agregue una clase MapRouteView a la colección Routes del control Map. Para obtener más información y un ejemplo, consulta Mostrar rutas e instrucciones en un mapa.
Para obtener información sobre cómo mostrar marcadores, formas y controles XAML en MapControl, consulta Mostrar puntos de interés (POI) en un mapa.
Visualización de vistas de Streetside
Una vista Streetside es una perspectiva de nivel de calle de una ubicación que aparece en la parte superior del control de mapa.
Considere la experiencia "dentro" de la vista Streetside independiente del mapa que se muestra originalmente en el control de mapa. Por ejemplo, cambiar la ubicación en la vista Streetside no cambia la ubicación ni la apariencia del mapa "under" de la vista Streetside. Después de cerrar la vista Streetside (haciendo clic en la X en la esquina superior derecha del control), el mapa original permanece sin cambios.
Para mostrar una vista streetside
- Determine si las vistas streetside se admiten en el dispositivo comprobando IsStreetsideSupported.
- Si se admite la vista Streetside, cree un StreetsidePanorama cerca de la ubicación especificada llamando a FindNearbyAsync.
- Determine si se encontró un panorama cercano comprobando si streetsidePanorama no es null
- Si se encontró un panorama cercano, cree una streetsideExperience para la propiedad CustomExperience del control de mapa.
En este ejemplo se muestra cómo mostrar una vista Streetside similar a la imagen anterior.
Nota:
El mapa de información general no aparecerá si el control de mapa tiene un tamaño demasiado pequeño.
private async void showStreetsideView()
{
// Check if Streetside is supported.
if (MapControl1.IsStreetsideSupported)
{
// Find a panorama near Avenue Gustave Eiffel.
BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 48.858, Longitude = 2.295};
Geopoint cityCenter = new Geopoint(cityPosition);
StreetsidePanorama panoramaNearCity = await StreetsidePanorama.FindNearbyAsync(cityCenter);
// Set the Streetside view if a panorama exists.
if (panoramaNearCity != null)
{
// Create the Streetside view.
StreetsideExperience ssView = new StreetsideExperience(panoramaNearCity);
ssView.OverviewMapVisible = true;
MapControl1.CustomExperience = ssView;
}
}
else
{
// If Streetside is not supported
ContentDialog viewNotSupportedDialog = new ContentDialog()
{
Title = "Streetside is not supported",
Content ="\nStreetside views are not supported on this device.",
PrimaryButtonText = "OK"
};
await viewNotSupportedDialog.ShowAsync();
}
}
Visualización de vistas aéreas 3D
Especifique una perspectiva 3D del mapa mediante la clase MapScene. La escena del mapa representa la vista 3D que aparece en el mapa. La clase MapCamera representa la posición de la cámara que mostraría dicha vista.
Para que los edificios y otras características de la superficie del mapa aparezcan en 3D, establezca la propiedad Style del control de mapa en MapStyle.Aerial3DWithRoads. Este es un ejemplo de una vista 3D con el estilo Aerial3DWithRoads .
Para mostrar una vista 3D
- Determine si se admiten vistas 3D en el dispositivo comprobando Is3DSupported.
- Si se admiten vistas 3D, establezca la propiedad Style del control de mapa en MapStyle.Aerial3DWithRoads.
- Cree un objeto MapScene mediante uno de los muchos métodos CreateFrom, como CreateFromLocationAndRadius y CreateFromCamera.
- Llame a TrySetSceneAsync para mostrar la vista 3D. También puede especificar una animación opcional que se usará cuando cambie la vista proporcionando una constante de la enumeración MapAnimationKind.
En este ejemplo se muestra cómo mostrar una vista 3D.
private async void display3DLocation()
{
if (MapControl1.Is3DSupported)
{
// Set the aerial 3D view.
MapControl1.Style = MapStyle.Aerial3DWithRoads;
// Specify the location.
BasicGeoposition hwGeoposition = new BasicGeoposition() { Latitude = 43.773251, Longitude = 11.255474};
Geopoint hwPoint = new Geopoint(hwGeoposition);
// Create the map scene.
MapScene hwScene = MapScene.CreateFromLocationAndRadius(hwPoint,
80, /* show this many meters around */
0, /* looking at it to the North*/
60 /* degrees pitch */);
// Set the 3D view with animation.
await MapControl1.TrySetSceneAsync(hwScene,MapAnimationKind.Bow);
}
else
{
// If 3D views are not supported, display dialog.
ContentDialog viewNotSupportedDialog = new ContentDialog()
{
Title = "3D is not supported",
Content = "\n3D views are not supported on this device.",
PrimaryButtonText = "OK"
};
await viewNotSupportedDialog.ShowAsync();
}
}
Obtener información sobre las ubicaciones
Obtenga información sobre las ubicaciones del mapa llamando a los métodos siguientes de MapControl.
- Método TryGetLocationFromOffset : obtiene la ubicación geográfica que corresponde al punto especificado en la ventanilla del control Map.
- Método GetOffsetFromLocation : obtenga el punto en la ventanilla del control Map que corresponde a la ubicación geográfica especificada.
- Método IsLocationInView : determine si la ubicación geográfica especificada está actualmente visible en la ventanilla del control Map.
- Método FindMapElementsAtOffset : obtiene los elementos del mapa ubicados en el punto especificado en la ventanilla del control Map.
Controlar la interacción y los cambios
Controle los gestos de entrada de usuario en el mapa controlando los siguientes eventos de MapControl. Obtenga información sobre la ubicación geográfica en el mapa y la posición física en la ventanilla donde se produjo el gesto comprobando los valores de las propiedades Location y Position de MapInputEventArgs.
Determine si el mapa se está cargando o completamente cargado controlando el evento LoadingStatusChanged del control.
Controle los cambios que se producen cuando el usuario o la aplicación cambian la configuración del mapa controlando los siguientes eventos de MapControl.
Mejores prácticas recomendadas
Use suficiente espacio de pantalla (o toda la pantalla) para mostrar el mapa para que los usuarios no tengan que desplazarse y acercar excesivamente para ver información geográfica.
Si el mapa solo se usa para presentar una vista estática, informativa, el uso de un mapa más pequeño podría ser más adecuado. Si va con un mapa estático más pequeño, basa sus dimensiones en facilidad de uso, lo suficientemente pequeño como para conservar suficiente espacio de pantalla, pero lo suficientemente grande como para permanecer legible.
Inserte los puntos de interés en la escena del mapa mediante elementos de mapa; cualquier información adicional se puede mostrar como interfaz de usuario transitoria que superpone la escena del mapa.