Windows 10 nos proporciona una funcionalidad para acceder la la ubicación del dispositivo (pc, celular, tablet etc.) retornando la latitud y longitud.
Hay dos clases fundamentales a conocer: Geolocator y Geoposition.
La precisión de la ubicación dependerá de la forma de acceder a dicho dato que nos permite el dispositivo en cuestión:
- GPS: Es el más preciso y conveniente, pero no todos los dispositivos lo disponen (aproximadamente 10 metros de error)
- Torres de celulares: con una aproximación entre 300 metros y 3.000 metros.
- Dirección IP: entre aproximadamente 1.000 metros y 5.000 metros.
En Windows 10 antes de acceder a nuestra ubicación el usuario del mismo debe consentir dicha información mediante un diálogo de confirmación.
Problema
Confeccionar una aplicación que muestre en un control WebView los servicios del Google con la ubicación aproximada del dispositivo. Utilizar las funcionalidades de Geolocator para obtener la latitud y longitud, pasar dichos valores a los servidores de Google para que nos retorne dicho mapa.
Como primer paso creamos un nuevo proyecto llamado "Proyecto35" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto
El primer paso es indicar que nuestra aplicación utilizará los servicios de posicionamiento, esto se hace accediendo al archivo Package.appxmanifest desde el "Explorador de soluciones" y marcando la opción de "Ubicación":
La interfaz visual será muy sencilla, dispondremos un botón y un WebView, el archivo MainPage.xaml es:
<Page
x:Class="Proyecto35.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto35"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0"
Content="Ver posicion en el mapa"
HorizontalAlignment="Center"
Click="Button_Click" />
<WebView Grid.Row="1"
x:Name="webView1" />
</Grid>
</Page>
La lógica la definiremos en el archivo MainPage.xaml.cs donde debemos obtener la ubicación del dispositivo y su posterior visualización dentro del control de navegación.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Devices.Geolocation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// La plantilla de elemento Página en blanco está documentada en http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace Proyecto35
{
/// <summary>
/// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private async void Button_Click(System.Object sender, RoutedEventArgs e)
{
Geolocator geolocator1 = new Geolocator();
Geoposition geopositiona1 = await geolocator1.GetGeopositionAsync();
string latitude = geopositiona1.Coordinate.Point.Position.Latitude.ToString();
string longitude = geopositiona1.Coordinate.Point.Position.Longitude.ToString();
string direccion = latitude + "," + longitude;
string mapa = "http://maps.googleapis.com/maps/api/staticmap?center=" + direccion + "&zoom=14&size=500x500&sensor=false&scale=2";
Uri uri1 = new Uri(mapa);
webView1.Navigate(uri1);
}
}
}
Necesitamos importar el espacio de nombres:
using Windows.Devices.Geolocation;
El evento Click del botón debe ser asíncrono:
private async void Button_Click(System.Object sender, RoutedEventArgs e)
{
...
}
Definimos y creamos un objeto de la clase Geolocator:
Geolocator geolocator1 = new Geolocator();
Llamamos al método GetGeopositionAsync de la clase Geolocator en forma asíncrona. Este método nos retorna un objeto de la clase Geoposition.
El objeto de la clase Geoposition almacena entre otros datos la latitud y la longitud:
Geoposition geopositiona1 = await geolocator1.GetGeopositionAsync();
string latitude = geopositiona1.Coordinate.Point.Position.Latitude.ToString();
string longitude = geopositiona1.Coordinate.Point.Position.Longitude.ToString();
Por último llamamos al método Navigate del objeto webView1 indicando la url de los servicios de mapas de Google (utilizamos la latitud y longitud previamente recuperadas):
string direccion = latitude + "," + longitude;
string mapa = "http://maps.googleapis.com/maps/api/staticmap?center=" + direccion + "&zoom=14&size=500x500&sensor=false&scale=2";
Uri uri1 = new Uri(mapa);
webView1.Navigate(uri1);
Cuando lo ejecutamos podemos ver el diálogo que aparece para que el usuario consienta informar su localización,y podremos ver en el WebView la página de Google Maps con el mapa.
Si volvemos a ejecutar el programa no aparecerá el diálogo de confirmación de localización, queda configurado con la primera vez.
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto35.zip