Share via

Xamarin.Forms Control de mapa

  • Artículo

El control Map es una vista multiplataforma para mostrar y anotar mapas. Usa el control de mapa nativo para cada plataforma, lo que proporciona una experiencia de mapas rápida y familiar para los usuarios:

Captura de pantalla del control de mapa, en iOS y Android

La clase Map define las siguientes propiedades que controlan su apariencia y comportamiento:

  • IsShowingUser, de tipo bool, indica si el mapa muestra la ubicación actual del usuario.
  • ItemsSource, de tipo IEnumerable, que colección de elementos IEnumerable que se van a mostrar.
  • ItemTemplate, de tipo DataTemplate, que especifica el elemento DataTemplate se va a aplicar a cada elemento de la colección de elementos mostrados.
  • ItemTemplateSelector, de tipo DataTemplateSelector, que especifica el elemento DataTemplateSelector que se usará para elegir una instancia de DataTemplate para un elemento en tiempo de ejecución.
  • HasScrollEnabled, de tipo bool, determina si el mapa puede desplazarse.
  • HasZoomEnabled, de tipo bool, determina si en el mapa se puede aplicar zoom.
  • MapElements, de tipo IList<MapElement>, representa la lista de elementos del mapa, como polígonos y polilíneas.
  • MapType, de tipo MapType, indica el estilo de presentación del mapa.
  • MoveToLastRegionOnLayoutChange, de tipo bool, controla si la región de mapa mostrada se moverá de su región actual a su región establecida previamente cuando se produzca un cambio de diseño.
  • Pins, de tipo IList<Pin>, representa la lista de pines o marcas del mapa.
  • TrafficEnabled, de tipo bool, indica si los datos de tráfico se superponen en el mapa.
  • VisibleRegion, de tipo MapSpan, devuelve la región mostrada actualmente del mapa.

Estas propiedades, con la excepción de las propiedades MapElements, Pins y VisibleRegion están respaldadas por los objetos BindableProperty, lo que significa que estas propiedades pueden ser destinos de los enlaces de datos.

La clase Map define un evento MapClicked que se desencadena cuando se pulsa en el mapa. El objeto MapClickedEventArgs que acompaña al evento que tiene una propiedad de nombre Position, de tipo Position. Cuando se desencadena el evento, la propiedad Position se establece en la ubicación del mapa que se ha pulsado. Para obtener información sobre la estructura Position, vea Posición y distancia de mapa.

Para más información sobre las propiedades ItemsSource, ItemTemplate y ItemTemplateSelector, consulta Mostrar una colección de pines.

Presentación de un mapa

Un Map se puede mostrar agregándolo a un diseño o una página:

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
    <maps:Map x:Name="map" />
</ContentPage>

Nota:

Se requiere una definición de espacio de nombres xmlns adicional para hacer referencia al Xamarin.Forms.Controles de mapas. En el ejemplo anterior, se hace referencia al espacio de nombres Xamarin.Forms.Maps a través de la palabra clave maps.

El código de C# equivalente es el siguiente:

using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace WorkingWithMaps
{
    public class MapTypesPageCode : ContentPage
    {
        public MapTypesPageCode()
        {
            Map map = new Map();
            Content = map;
        }
    }
}

En este ejemplo se llama al constructor predeterminado Map, que centra el mapa en Roma:

Captura de pantalla del control de mapa con la ubicación predeterminada, en iOS y Android

Como alternativa, se puede pasar un argumento MapSpan a un constructor Map para establecer el punto central y el nivel de zoom del mapa cuando se carga. Para más información, consulta Presentación de una ubicación específica en un mapa.

Tipos de mapas

La propiedad Map.MapType se puede establecer en un miembro de enumeración MapType para definir el estilo de presentación del mapa. La enumeración MapType define los miembros siguientes:

  • Street especifica que se mostrará un mapa de calles.
  • Satellite especifica que se mostrará un mapa que contiene imágenes de satélite.
  • Hybrid especifica que se mostrará un mapa que combina datos de calle y satélite.

De forma predeterminada, Map mostrará un mapa de calles si la propiedad MapType no está definida. La propiedad MapType se debe establecer en uno de los miembros de la enumeración MapType:

<maps:Map MapType="Satellite" />

El código de C# equivalente es el siguiente:

Map map = new Map
{
    MapType = MapType.Satellite
};

Las capturas de pantalla siguientes muestran un Map cuando la propiedad MapType está establecida en Street:

Captura de pantalla del control de mapa con el tipo de mapa de calles, en iOS y Android

Las capturas de pantalla siguientes muestran un Map cuando la propiedad MapType está establecida en Satellite:

Captura de pantalla del control de mapa con el tipo de mapa satélite, en iOS y Android

Las capturas de pantalla siguientes muestran un Map cuando la propiedad MapType está establecida en Hybrid:

Captura de pantalla del control de mapa con el tipo de mapa híbrido, en iOS y Android

Mostrar una ubicación específica en un mapa

La región de un mapa que se va a mostrar cuando se carga un mapa se puede establecer pasando un argumento MapSpan al constructor Map:

<maps:Map>
    <x:Arguments>
        <maps:MapSpan>
            <x:Arguments>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>36.9628066</x:Double>
                        <x:Double>-122.0194722</x:Double>
                    </x:Arguments>
                </maps:Position>
                <x:Double>0.01</x:Double>
                <x:Double>0.01</x:Double>
            </x:Arguments>
        </maps:MapSpan>
    </x:Arguments>
</maps:Map>

El código de C# equivalente es el siguiente:

Position position = new Position(36.9628066, -122.0194722);
MapSpan mapSpan = new MapSpan(position, 0.01, 0.01);
Map map = new Map(mapSpan);

Este ejemplo crea un objeto Map con el que muestra la región especificada por el objeto MapSpan. El objeto MapSpan se centra en la latitud y longitud representada por un objeto Position y abarca 0,01 grados de latitud y 0,01 grados de longitud. Para obtener información sobre la estructura Position, vea Posición y distancia de mapa. Para obtener información sobre cómo pasar argumentos en XAML, consulta Paso de argumentos en XAML.

El resultado es que, cuando se muestra el mapa, se centra en una ubicación específica y abarca un número específico de grados de latitud y longitud:

Captura de pantalla del control de mapa con la ubicación especificada, en iOS y Android

Creación de un objeto MapSpan

Hay varios enfoques para crear objetos MapSpan. Un enfoque común es proporcionar los argumentos necesarios al constructor MapSpan. Se trata de una latitud y longitud representadas por un objeto Position y valores double que representan los grados de latitud y longitud que abarca MapSpan. Para obtener información sobre la estructura Position, vea Posición y distancia de mapa.

Como alternativa, hay tres métodos en la clase MapSpan que devuelven nuevos objetos MapSpan:

  1. ClampLatitude devuelve un objeto MapSpan con el mismo LongitudeDegrees que la instancia de clase del método y un radio definido por sus argumentos north y south.
  2. FromCenterAndRadius devuelve un objeto MapSpan definido por sus argumentos Position y Distance.
  3. WithZoom devuelve un objeto MapSpan con el mismo centro que la instancia de clase del método, pero con un radio multiplicado por su argumento double.

Para obtener información sobre la estructura Distance, vea Posición y distancia de mapa.

Una vez creado MapSpan, se puede acceder a las siguientes propiedades para recuperar datos sobre él:

  • Center, que representa el Position en el centro geográfico de la MapSpan.
  • LatitudeDegrees, que representa los grados de latitud que abarcan el MapSpan.
  • LongitudeDegrees, que representa los grados de longitud que abarcan el MapSpan.
  • Radius, que representa el radio de MapSpan.

Mover el mapa

Se puede llamar al método Map.MoveToRegion para cambiar la posición y el nivel de zoom de un mapa. Este método acepta un argumento MapSpan que define la región del mapa que se va a mostrar y su nivel de zoom.

En el código siguiente se muestra un ejemplo de cómo mover la región mostrada en un mapa:

MapSpan mapSpan = MapSpan.FromCenterAndRadius(position, Distance.FromKilometers(0.444));
map.MoveToRegion(mapSpan);

Acercamiento/alejamiento del mapa

El nivel de zoom de Map se puede cambiar sin modificar su ubicación. Esto se puede lograr mediante la interfaz de usuario de mapa o mediante programación llamando al método MoveToRegion con un argumento MapSpan que usa la ubicación actual como argumento Position:

double zoomLevel = 0.5;
double latlongDegrees = 360 / (Math.Pow(2, zoomLevel));
if (map.VisibleRegion != null)
{
    map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongDegrees, latlongDegrees));
}

En este ejemplo, se llama al método MoveToRegion con un argumento MapSpan que especifica la ubicación actual del mapa, a través de la propiedad Map.VisibleRegion y el nivel de zoom como grados de latitud y longitud. El resultado general es que se cambia el nivel de zoom del mapa, pero su ubicación no. Un enfoque alternativo para implementar zoom en un mapa es usar el método MapSpan.WithZoom para controlar el factor de zoom.

Importante

El zoom de un mapa, ya sea a través de la interfaz de usuario del mapa o mediante programación, requiere que la propiedad Map.HasZoomEnabled sea true. Para obtener más información sobre esta propiedad, consulta Deshabilitar el zoom.

Personalización del comportamiento del mapa

El comportamiento de Map se puede personalizar estableciendo algunas de sus propiedades y controlando el evento MapClicked.

Nota:

Se puede lograr una personalización adicional del comportamiento del mapa mediante la creación de un representador personalizado de mapa. Para obtener más información, vea Personalización de un Mapa de Xamarin.Forms.

Mostrar datos del tráfico

La clase Map define una propiedad TrafficEnabled de tipo bool. De forma predeterminada, esta propiedad es false, que indica que los datos de tráfico no se superponen en el mapa. Cuando esta propiedad se establece en true, los datos de tráfico se superponen en el mapa. En el ejemplo siguiente se muestra cómo establecer esta propiedad:

<maps:Map TrafficEnabled="true" />

El código de C# equivalente es el siguiente:

Map map = new Map
{
    TrafficEnabled = true
};

Deshabilitar el desplazamiento

La clase Map define una propiedad HasScrollEnabled de tipo bool. De forma predeterminada, esta propiedad es true, que indica que el mapa puede desplazarse. Cuando esta propiedad se establece en false, el mapa no se desplazará. En el ejemplo siguiente se muestra cómo establecer esta propiedad:

<maps:Map HasScrollEnabled="false" />

El código de C# equivalente es el siguiente:

Map map = new Map
{
    HasScrollEnabled = false
};

Deshabilitar el zoom

La clase Map define una propiedad HasZoomEnabled de tipo bool. De forma predeterminada, esta propiedad es true, que indica que el zoom se puede realizar en el mapa. Cuando esta propiedad se establece en false, el mapa no se puede acercar. En el ejemplo siguiente se muestra cómo establecer esta propiedad:

<maps:Map HasZoomEnabled="false" />

El código de C# equivalente es el siguiente:

Map map = new Map
{
    HasZoomEnabled = false
};

Obtener la ubicación del usuario

La clase Map define una propiedad IsShowingUser de tipo bool. De forma predeterminada, esta propiedad es false, que indica que el mapa no muestra la ubicación actual del usuario. Cuando esta propiedad se establece en true, el mapa muestra la ubicación actual del usuario. En el ejemplo siguiente se muestra cómo establecer esta propiedad:

<maps:Map IsShowingUser="true" />

El código de C# equivalente es el siguiente:

Map map = new Map
{
    IsShowingUser = true
};

Importante

En iOS, Android y la Plataforma universal de Windows, el acceso a la ubicación del usuario requiere que se hayan concedido permisos de ubicación a la aplicación. Para obtener más información, consulta Configuración de la plataforma.

Mantenimiento de la región de mapa en el cambio de diseño

La clase Map define una propiedad MoveToLastRegionOnLayoutChange de tipo bool. De forma predeterminada, esta propiedad es true, que indica que la región de mapa mostrada se moverá de su región actual a su región establecida previamente cuando se produzca un cambio de diseño, como en la rotación del dispositivo. Cuando esta propiedad se establece en false, la región de mapa mostrada permanecerá centrada cuando se produzca un cambio de diseño. En el ejemplo siguiente se muestra cómo establecer esta propiedad:

<maps:Map MoveToLastRegionOnLayoutChange="false" />

El código de C# equivalente es el siguiente:

Map map = new Map
{
    MoveToLastRegionOnLayoutChange = false
};

Clics del mapa

La clase Map define un evento MapClicked que se desencadena cuando el usuario pulsa el mapa. El objeto MapClickedEventArgs que acompaña al evento que tiene una propiedad de nombre Position, de tipo Position. Cuando se desencadena el evento, la propiedad Position se establece en la ubicación del mapa que se ha pulsado. Para obtener información sobre la estructura Position, vea Posición y distancia de mapa.

En el ejemplo de código siguiente se muestra un controlador de eventos para el evento MapClicked:

void OnMapClicked(object sender, MapClickedEventArgs e)
{
    System.Diagnostics.Debug.WriteLine($"MapClick: {e.Position.Latitude}, {e.Position.Longitude}");
}

En este ejemplo, el controlador de eventos OnMapClicked genera la latitud y la longitud que representa la ubicación del mapa pulsado. El controlador de eventos se puede registrar con el evento MapClicked de la siguiente manera:

<maps:Map MapClicked="OnMapClicked" />

El código de C# equivalente es el siguiente:

Map map = new Map();
map.MapClicked += OnMapClicked;