Mostrar la ubicación con Mapas de Bing (XAML)

En este tema se explica cómo mostrar tu ubicación con Mapas de Bing y después cómo probar la aplicación con una variedad de ubicaciones mediante el Simulador incluido en Microsoft Visual Studio.

El código fuente completo de este tema puede descargarse aquí.

Requisitos previos

Debes tener conocimientos de XAML, Visual C# y eventos.

El acceso a la ubicación debe estar habilitado en el dispositivo que utilizas.

Paso 1: Descargar e instalar el SDK de Mapas de Bing para aplicaciones de la Tienda Windows

Descarga e instala el SDK de Mapas de Bing para aplicaciones de la Tienda Windows, desde el sitio de descarga.

Paso 2: Registrar y crear una clave de Mapas de Bing para tu aplicación

Regístrate como usuario en el Portal de Mapas de Bing y después sigue las instrucciones para Obtener una clave de Mapas de Bing para la aplicación. Usaremos la clave que se genere más adelante, cuando insertemos el control de Mapas de Bing en nuestro proyecto.

Paso 3: Abrir Visual Studio

Abre una instancia de Visual Studio.

Paso 4: Crear un nuevo proyecto

Crea un nuevo proyecto. Para ello, elige una Aplicación vacía (XAML) en los tipos de proyecto Visual C# > Tienda Windows. Asigna el nombre SimpleMapping a la aplicación.

Paso 5: Establecer la plataforma de destino

Abre el Administrador de configuración, en el menú Compilar, y establece la Plataforma de soluciones activas en x86 o x64.Establecer la plataforma en el Administrador de configuración

Paso 6: Agregar referencias de Mapas de Bing

En el Explorador de soluciones, haz clic con el botón secundario en Referencias y agrega referencias a Mapas de Bing para C#, C++ o Visual Basic y Paquete en tiempo de ejecución de Microsoft Visual C++.Agregar referencias en el Administrador de referencias

Paso 7: Establecer la funcionalidad de ubicación

Abre el archivo Package.appxmanifest y ve a la ficha Funcionalidades. Selecciona la funcionalidad de Ubicación.Establecer funcionalidades de ubicación

Paso 8: Agregar clases para los iconos de ubicación de 10 metros y 100 metros

  1. En el Explorador de soluciones, haz clic con el botón secundario en el proyecto SimpleMapping y agrega un Nuevo elemento. Selecciona Control de usuario y asigna a la página el nombre LocationIcon10m.xaml.
  2. Abre LocationIcon10m.xaml y copia el código XML siguiente (sustituyendo el contenido original del archivo). Este código proporciona un icono para mostrar cuando los datos de ubicación tengan una precisión de 10 metros aproximadamente.
    
    <UserControl
        x:Class="SimpleMapping.LocationIcon10m"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SimpleMapping"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Canvas>
            <Ellipse Height="25" Width="25" Fill="#FFF0F0F0" Margin="-12.5,-12.5,0,0"></Ellipse>
            <Ellipse Height="20" Width="20" Fill="Black" Margin="-10,-10,0,0"></Ellipse>
            <Ellipse Height="10" Width="10" Fill="White" Margin="-5,-5,0,0"></Ellipse>
        </Canvas>
    
    </UserControl>
    
    
    
  3. En el Explorador de soluciones, haz clic con el botón secundario en el proyecto SimpleMapping y agrega un Nuevo elemento. Selecciona Control de usuario y asigna a la página el nombre LocationIcon100m.xaml.
  4. Abre LocationIcon100m.xaml y copia el código XML siguiente (sustituyendo el contenido original del archivo). Este código proporciona un icono para mostrar cuando los datos de ubicación tengan una precisión de 100 metros aproximadamente. Ten en cuenta que si tenemos datos menos precisos, no mostraremos un icono; solo mostraremos una región en el mapa. Para obtener más información, consulta "Directrices para la representación gráfica de la ubicación", en Guidelines for location-aware apps.
    
    <UserControl
        x:Class="SimpleMapping.LocationIcon100m"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SimpleMapping"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Canvas>
            <Ellipse Height="55" Width="55" Fill="Black" Opacity=".35" Margin="-27.5,-27.5,0,0"></Ellipse>
            <Ellipse Height="50" Width="50" Fill="CornflowerBlue" Opacity=".65" Margin="-25,-25,0,0"></Ellipse>
            <Ellipse Height="25" Width="25" Fill="#FFF0F0F0" Margin="-12.5,-12.5,0,0"></Ellipse>
            <Ellipse Height="20" Width="20" Fill="Black" Margin="-10,-10,0,0"></Ellipse>
            <Ellipse Height="10" Width="10" Fill="White" Margin="-5,-5,0,0"></Ellipse>
        </Canvas>
    </UserControl>
    
    
    

Paso 9: Diseñar una página para mostrar el mapa

  1. Abre el archivo MainPage.xaml y copia el código XML siguiente, sustituyendo su contenido original. Este código XML mostrará un botón para recuperar la ubicación, un botón para cancelar la operación, seis cuadros de texto para mostrar los datos de la ubicación y las etiquetas, y un control de mapa para mostrar la ubicación.
    
    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SimpleMapping"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Maps="using:Bing.Maps"
        x:Class="SimpleMapping.MainPage"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button x:Name="MapLocationButton" Content="Map Current Location" HorizontalAlignment="Left" Margin="29,31,1157,0" VerticalAlignment="Top" Click="MapLocationButton_Click" Height="38"/>
    
            <Maps:Map x:Name="Map" Margin="0,120,0,0" Credentials="Insert Your Bing Maps Key Here"/>
    
            <Button x:Name="CancelGetLocationButton" Content="Cancel" HorizontalAlignment="Left" Margin="242,31,0,0" VerticalAlignment="Top" Click="CancelGetLocationButton_Click"/>
            <TextBox x:Name="MessageTextbox" HorizontalAlignment="Left" Margin="354,37,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="605" Background="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}"/>
            <TextBox HorizontalAlignment="Left" Margin="1046,10,0,0" TextWrapping="Wrap" Text="Latitude:" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox HorizontalAlignment="Left" Margin="1046,42,0,0" TextWrapping="Wrap" Text="Longitude:" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox HorizontalAlignment="Left" Margin="1046,74,0,0" TextWrapping="Wrap" Text="Accuracy:" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox x:Name="LatitudeTextbox" HorizontalAlignment="Left" Margin="1165,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox x:Name="LongitudeTextbox" HorizontalAlignment="Left" Margin="1165,42,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox x:Name="AccuracyTextbox" HorizontalAlignment="Left" Margin="1165,74,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
    
        </Grid>
    </Page>
    
    
    
  2. Inserta la clave de Mapas de Bing que obtuviste antes, en el atributo Credenciales del control de mapa.

Diseño de los controles en el diseñador

Paso 10: Agregar espacios de nombre al proyecto

En el archivo MainPage.xaml.cs, agrega el código siguiente.


using Windows.Devices.Geolocation;
using System.Threading;
using System.Threading.Tasks;
using Bing.Maps;

Paso 11: Agregar variables de miembro

En MainPage.xaml.cs, agrega estas variables de miembro a la clase MainPage.


    public sealed partial class MainPage : Page
    {

        // member variables to add
        private Geolocator _geolocator = null;
        private CancellationTokenSource _cts = null;
        LocationIcon10m _locationIcon10m;
        LocationIcon100m _locationIcon100m;

Paso 12: Inicializar variables de miembro

En MainPage.xaml.cs, reemplaza el constructor MainPage con este código, que inicializa las variables de miembro.


        public MainPage()
        {
            this.InitializeComponent();
            _geolocator = new Geolocator();
            _locationIcon10m = new LocationIcon10m();
            _locationIcon100m = new LocationIcon100m();

        }

Paso 13: Controlar el evento OnNavigated

En MainPage.xaml.cs, reemplaza el controlador de eventos OnNavigatedTo con este código, que inicializa los estados de los botones Obtener ubicación y Cancelar.


        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            MapLocationButton.IsEnabled = true;
            CancelGetLocationButton.IsEnabled = false;
        }

Paso 14: Controlar el evento MapLocationButton_Click

En MainPage.xaml.cs, agrega el controlador de eventos MapLocationButton_Click.

Este código hace lo siguiente:

  • Cambia el estado de los botones Obtener ubicación y Cancelar.
  • Quita cualquier icono de ubicación anterior que pueda haberse usado.
  • Establece un token de cancelación para que el usuario pueda cancelar la operación si tarda demasiado.
  • Obtiene la ubicación asincrónicamente.
  • Selecciona un icono de ubicación según la exactitud de los datos recuperados.
  • Establece el mapa en la ubicación.
  • Controla algunas condiciones de error.
  • Restablece los botones después de que la ubicación se haya recuperado.

        async private void MapLocationButton_Click(object sender, RoutedEventArgs e)
        {
            // Change the state of our buttons.
            MapLocationButton.IsEnabled = false;
            CancelGetLocationButton.IsEnabled = true;

            // Remove any previous location icon.
            if (Map.Children.Count > 0)
            {
                Map.Children.RemoveAt(0);
            }

            try
            {
                // Get the cancellation token.
                _cts = new CancellationTokenSource();
                CancellationToken token = _cts.Token;

                MessageTextbox.Text = "Waiting for update...";

                // Get the location.
                Geoposition pos = await _geolocator.GetGeopositionAsync().AsTask(token);

                MessageTextbox.Text = "";

                Location location = new Location(pos.Coordinate.Point.Position.Latitude, pos.Coordinate.Point.Position.Longitude);

                // Now set the zoom level of the map based on the accuracy of our location data.
                // Default to IP level accuracy. We only show the region at this level - No icon is displayed.
                double zoomLevel = 13.0f;

                // if we have GPS level accuracy
                if (pos.Coordinate.Accuracy <= 10)
                {
                    // Add the 10m icon and zoom closer.
                    Map.Children.Add(_locationIcon10m);
                    MapLayer.SetPosition(_locationIcon10m, location);
                    zoomLevel = 15.0f;
                }
                // Else if we have Wi-Fi level accuracy.
                else if (pos.Coordinate.Accuracy <= 100)
                {
                    // Add the 100m icon and zoom a little closer.
                    Map.Children.Add(_locationIcon100m);
                    MapLayer.SetPosition(_locationIcon100m, location);
                    zoomLevel = 14.0f;
                }

                // Set the map to the given location and zoom level.
                Map.SetView(location, zoomLevel);

                // Display the location information in the textboxes.
                LatitudeTextbox.Text = pos.Coordinate.Point.Position.Latitude.ToString();
                LongitudeTextbox.Text = pos.Coordinate.Point.Position.Longitude.ToString();
                AccuracyTextbox.Text = pos.Coordinate.Accuracy.ToString();
            }
            catch (System.UnauthorizedAccessException)
            {
                MessageTextbox.Text = "Location disabled.";

                LatitudeTextbox.Text = "No data";
                LongitudeTextbox.Text = "No data";
                AccuracyTextbox.Text = "No data";
            }
            catch (TaskCanceledException)
            {
                MessageTextbox.Text = "Operation canceled.";
            }
            finally
            {
                _cts = null;
            }

            // Reset the buttons.
            MapLocationButton.IsEnabled = true;
            CancelGetLocationButton.IsEnabled = false;
        }


Paso 15: Controlar el evento CancelGetLocationButton_Click

En MainPage.xaml.cs, agrega el controlador de eventos CancelGetLocationButton_Click. Este código cancela la llamada asincrónica para obtener la ubicación, si el usuario presiona el botón Cancelar. También restablece el estado de los botones.


        private void CancelGetLocationButton_Click(object sender, RoutedEventArgs e)
        {
            if (_cts != null)
            {
                _cts.Cancel();
                _cts = null;
            }

            MapLocationButton.IsEnabled = true;
            CancelGetLocationButton.IsEnabled = false;
        }

Paso 16: Controlar el evento OnNavigatingFrom

En MainPage.xaml.cs, agrega el controlador de eventos OnNavigatingFrom. Este código cancela la llamada asincrónica para obtener la ubicación, si el usuario abandona la página.


        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            if (_cts != null)
            {
                _cts.Cancel();
                _cts = null;
            }

            base.OnNavigatingFrom(e);
        }

Paso 17: Compilar la aplicación

Elige Compilar > Compilar solución para compilar el proyecto.

Paso 18: Probar la aplicación

  1. En el menú Depurar, haz clic en Iniciar depuración para probar la solución.
  2. La primera vez que ejecutes la muestra, un mensaje te preguntará si la aplicación puede usar tu ubicación. Elige la opción Permitir.
  3. Haz clic en el botón Get Location (Obtener ubicación) para obtener la ubicación actual.

Nota  Si no se muestran los datos de ubicación, comprueba lo siguiente:
  • Asegúrate de haber habilitado el acceso a la ubicación. Abre package.appxmanifest en el Explorador de soluciones y comprueba la Ubicación, en la ficha Funcionalidades.
  • Si se ha desactivado la configuración de ubicación, la aplicación no podrá obtener acceso a la ubicación del usuario. En la aplicación Configuración, comprueba la configuración de privacidad de ubicación. La aplicación puede acceder a la ubicación del usuario solo cuando:
    • La ubicación de este dispositivo... está activada (no es aplicable para Windows 10 Mobile Insider Preview)
    • La configuración de servicios de ubicación, "Ubicación", está activada
    • En Elegir las aplicaciones que pueden usar tu ubicación, la aplicación está establecida en activada

Paso 19: Probar la aplicación en el Simulador

Para probar la aplicación en distintas ubicaciones, cambia el Dispositivo de destino en Visual Studio de Equipo local a Simulador.

Configurar el dispositivo de destino en el Simulador

Selecciona Iniciar depuración para iniciar el Simulador con la aplicación ejecutándose en él. Selecciona el icono de globo terráqueo del Simulador para establecer distintas ubicaciones y exactitudes.

Aplicación ejecutándose en el Simulador.

Temas relacionados

Muestra de geolocalización de Windows 10 Insider Preview
Muestra de geolocalización de Windows 8.1
Windows.Devices.Geolocation
SDK de Mapas de Bing para aplicaciones de la Tienda Windows
Portal de Mapas de Bing
Obtener una clave de Mapas de Bing
Directrices para usar dispositivos con información confidencial
Guía básica para crear aplicaciones con C#, C++ o VB

 

 

Mostrar:
© 2015 Microsoft