windowphone8 map location

UNIVERSIDAD TECNOLOGICA FACULTAD DE INFORMATICA Y CIENCIAS APLICADA

C022015 Página 1

Guía para agregar y mostrar ubicación en control Map. Temas a Desarrollar Agregar un control Map. Como Mostrar su Ubicación Actual en un Mapa en Windows Phone 8.

Agregar un control Map. Incorporando la capacidad de manejo de Mapa Para incorporar un control de Mapas debe agregar la capacidad ID_Cap_Map antes del control de Map. En Visual Studio 2012, crear un nuevo proyecto de Windows Phone 8 de nombre MapApplication.


C022015 Página 2

En el Proyecto MapApplication, haga clic en la carpeta Propiedades y a continuación haga doble clic en el

archive WMAppManifest. Xml.

Luego seleccione en WMAppManifest.xml la pestaña Capabilities.


C022015 Página 3

En la tabla de Capabilities seleccione ID_CAP_MAP

Existen diversas formas de agregar el objete control de Mapas utilizaremos seleccionar arastrar y colocar, por ello clic en ToolBox y luego seleccionamos en el objeto Map en All Windows Phone Controls, para ubicar en la plantilla del diseñador de Windows Phone.


C022015 Página 4

O bien agregar la línea de código XAML para incorporar un objeto MAP como se muestra en la siguiente línea, que ha sido generada por el producto. <maps:Map HorizontalAlignment="Left" Margin="360,161,0,0" VerticalAlignment="Top"/>


C022015 Página 5

Como Mostrar su Ubicación Actual en un Mapa en Windows Phone 8. En Visual Studio crear un nuevo proyecto de Windows Phone App de nombre ShowMyLocationOnMap.


C022015 Página 6

Cambiar en nombre del titilo de la aplicacion por ello seleccionamos el primer textblock el contienen MY APPLICATION y lo cambiamos a SHOW MY LOCATION ON MAP. Asi también el textblock que contienen page name a My Location.

Luego seleccionamos los capabilities en el archivo de manifiesto estas son ID_CAP_LOCATION y ID_CAP_MAP. En el explorar de soluciones seleccionamos el proyecto que tienen por nombre ShowMyLocationMap que es un proyecto en C#, luego ubicamos el archivo de nombre WMAppManifest.xml, doble clic en archivo seleccionado.


C022015 Página 7

En el diseñador del manifiesto seleccionamos la pestaña Capabilities ahí marcamos ID_CAP_LOCATION y ID_CAP_MAP, por ultimo almacenamos los cambios guardando.

Adicionando el control de mapa En el Toolbox en la seccion All Windows Phone Controls seleccionamos el control Map y drag an drop a la plantilla del diseñador de Windows Phone.

Observamos que agrego el objeto de Mapa lo que es representado por la siguiente línea: <maps:Map HorizontalAlignment="Left" Margin="243,513,0,0" VerticalAlignment="Top"/>


C022015 Página 8

Seleccione el objeto Mapa y diríjase a propiedades ahí debe de colocar un nombre al objeto el cual es mapWithMyLocation

Se la seccion de la ventana del XAML en MainPage.xaml encontramos una línea similar a la siguiente <maps:Map x:Name="mapWithMyLocation1" HorizontalAlignment="Left" Margin="269,455,0,0" VerticalAlignment="Top"/> Debemos de remover todos las propiedades a excepción de Name debiendo quedarnos como la siguiente línea:


C022015 Página 9

<maps:Map x:Name="mapWithMyLocation"/>

Agregando una clase para conversión de geocoordinates Incorporamos una clase para convertir coordenadas (geocoordinates), por ello en Solution Explorer seleccionamos el proyecto (ShowMyLocationOnMap) y clic en botón derecho de raton y agregamos una clase la cual tendrá por nombre CoordinateConverter.


C022015 Página 10

Luego editamos el código del Nuevo archive de clase y colocamos o reemplazamos por el siguiente código: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Device.Location; using Windows.Devices.Geolocation; namespace ShowMyLocationOnMap { public static class CoordinateConverter { public static GeoCoordinate ConvertGeocoordinate(Geocoordinate geocoordinate) { return new GeoCoordinate ( geocoordinate.Latitude, geocoordinate.Longitude, geocoordinate.Altitude ?? Double.NaN, geocoordinate.Accuracy, geocoordinate.AltitudeAccuracy ?? Double.NaN, geocoordinate.Speed ?? Double.NaN, geocoordinate.Heading ?? Double.NaN ); } } }


C022015 Página 11

Mostrar nuestra posición en el mapa Seleccionamos el archivo MainPage.xaml.cs que el codigo para importar las siguientes namespaces:

Las namespaces que debemos importar son las seleccionadas y en color de fondo celeste:

using Microsoft.Phone.Maps.Controls; using System.Device.Location; using Windows.Devices.Geolocation; using System.Windows.Media; using System.Windows.Shapes;


C022015 Página 12

En el archivo MainPage.xamls.cs en la sección de la clase MainPage escribir el siguiente código:

Siempre en la clase MainPage incorporar el código que llamada al método ShowMyLocationOnTheMap

En el método ShowMyLocationOnTheMap agregar el siguiente código para obtener la actual posición. Este código utiliza la clase CoordinateConverter que anteriormente se construyó y escribió código.

En el método ShowMyLocationOnTheMap agregar el siguiente código para marcar la actual posición en el centro del mapa.

El resultado final de nuestro código seria de la siguiente forma:


C022015 Página 13

Marcando nuestra localización en el mapa En el método ShowMyLocationOnTheMap, agregar el siguiente código que crea un pequeño círculo que tiene un diámetro de 20 pixels y con un 50 por ciento de opacidad

En el método ShowMyLocationOnTheMap agregamos el siguiente código para crear un MapOverlay para contener el círculo. Este código centra el circulo y sobrepone en la actual localización por eso utilizamos las propiedades PositionOrigin y GeoCoordinate.

En el método ShowMyLocationOnTheMap agregar el siguiente código para crear un MapLayer para contener el MapOverlay

En el método ShowMyLocationOnTheMap agregar el siguiente código para adicionar el MapLayer en el mapa.


C022015 Página 14

El código final que tendríamos en nuestro método es el siguiente:

Resultado ya en ejecución de proyecto.


C022015 Página 15

Bibliografia http://msdn.microsoft.com/en-us/library/windows/apps/jj735578(v=vs.105).aspx http://msdn.microsoft.com/en-us/library/windows/apps/jj714071(v=vs.105).aspx http://www.microsoftvirtualacademy.com/ http://www.microsoftvirtualacademy.com/training-courses/desarrollo-en-windows-phone-8

http://msdn.microsoft.com/en-us/library/windows/apps/jj735578(v=vs.105).aspx

http://msdn.microsoft.com/en-us/library/windows/apps/jj714071(v=vs.105).aspx

http://www.microsoftvirtualacademy.com/

http://www.microsoftvirtualacademy.com/training-courses/desarrollo-en-windows-phone-8

windowphone8 map location

Documents