MapControl

El MapControl muestra un mapa simbólico e interactivo de la Tierra con tecnología Azure Maps. Puede mostrar ubicaciones, agregar marcadores y capas personalizadas, y permitir que los usuarios interactúen con el mapa mediante controles de desplazamiento, zoom, rotación e inclinación.

MapControl requiere una cuenta de Azure Maps. Siga las instrucciones en Administrar la cuenta de Azure Maps para crear una cuenta y obtener un token de servicio de mapas.

¿Es este el control adecuado?

Usa mapControl cuando quieras mostrar datos geográficos en la aplicación, como:

  • Mostrar una ubicación en un mapa con un pin.
  • Mostrar una colección de puntos de interés.
  • Proporcionar una experiencia de mapa interactiva con zoom y movimiento panorámico.

Crear un MapControl

Abra la aplicación Galería de WinUI 3 y vea MapControl en acción.

Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Agregue un MapControl a la página y establezca el MapServiceToken en la clave de Azure Maps.

<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            Height="400" />

Establecimiento de la ubicación del mapa

Establezca las propiedades Center y ZoomLevel para controlar lo que muestra el mapa.

using Windows.Devices.Geolocation;

var position = new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 };
myMap.Center = new Geopoint(position);
myMap.ZoomLevel = 12;

<!-- Set initial center and zoom in XAML is not supported; set in code-behind -->
<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            Height="400" />

Añadir pines al mapa

Utiliza MapIcon para mostrar marcadores en el mapa. Agregue iconos a MapElementsLayer y agregue la capa a la colección Layers del mapa.

using Windows.Devices.Geolocation;
using Microsoft.UI.Xaml.Controls;
using System.Collections.Generic;

var position = new BasicGeoposition
{
    Latitude = 47.6062,
    Longitude = -122.3321
};

var icon = new MapIcon
{
    Location = new Geopoint(position),
};

var layer = new MapElementsLayer
{
    MapElements = new List<MapElement> { icon }
};

myMap.Layers.Add(layer);

Mostrar u ocultar controles interactivos

La propiedad InteractiveControlsVisible controla si el mapa muestra controles de superposición integrados para el zoom, la rotación, el tono y el estilo de mapa.

<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            InteractiveControlsVisible="True"
            Height="400" />

Controlar los clics del elemento de mapa

Suscríbase al evento MapElementClick para responder cuando el usuario hace clic en un elemento de mapa como un pin.

myMap.MapElementClick += (sender, args) =>
{
    foreach (var element in args.MapElements)
    {
        if (element is MapIcon clickedIcon)
        {
            // Handle the clicked icon
        }
    }
};

Control de errores del servicio de mapas

Suscríbase al evento MapServiceErrorOccurred para detectar problemas que se comunican con el servicio de mapa, como un mapServiceToken no válido o que falta.

myMap.MapServiceErrorOccurred += (sender, args) =>
{
    // Log or display the error
    System.Diagnostics.Debug.WriteLine("Map service error occurred.");
};
  • Last updated on