Exportar (0) Imprimir
Expandir todo
EN
Este contenido no se encuentra disponible en su idioma, pero aquí tiene la versión en inglés.

How to show your current location on a map in Windows Phone 8

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 only

This topic describes how to create an app that displays your current location on the Map control and marks the location with a small circle.

TipTip:

This topic describes how to write code that displays a map and marks a location on the map inside your app. If you simply want to display a map and mark a location, you can also use the Maps task, which launches the built-in Maps app. For more info, see How to use the Maps task for Windows Phone 8.

Before your app uses location services, make sure that the user has given consent to use the phone’s location. For more info and sample code, see How to get the phone's current location for Windows Phone 8.

Icon to indicate an SDK sample

For a sample that demonstrates some of the tasks described in this topic, download the Simple Map control sample.

This topic contains the following sections.

To create the project

  1. In Visual Studio, create a new Windows Phone app project. Name the new project ShowMyLocationOnMap.

  2. Optionally, change the title of the app.

    1. In MainPage.xaml, in the designer, select the first textblock which contains the app title MY APPLICATION.

    2. Change the text to SHOW MY LOCATION ON MAP.

  3. Optionally, change the title of the page.

    1. In the designer, select the second textblock which contains the page title page name.

    2. Change the text to my location.

  4. Select the ID_CAP_LOCATION and the ID_CAP_MAP capabilities in the app manifest file.

    1. In Solution Explorer, expand the Properties folder in a C# project or the My Project folder in a Visual Basic project. In a Visual Basic project, you may have to click Show all files before you can expand the My Project folder.

    2. In the expanded folder, locate and open the app manifest file, WMAppManifest.xml.

    3. In Manifest Designer, on the Capabilities page, check the ID_CAP_LOCATION and the ID_CAP_MAP capabilities.

    4. Save your changes and close Manifest Designer.

For more info, see How to add a Map control to a page in Windows Phone 8.

To add the Map control

  1. In the Toolbox, select the Map control and drag and drop it onto the designer.

    If you add the control by writing XAML, you also have to add the following xmlns declaration to the phone:PhoneApplicationPage element. If you drag and drop the Map control from the Toolbox, this declaration is added automatically.

    xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
    
    
  2. In the Properties window, name the Map control mapWithMyLocation.

  3. In MainPage.xaml, in the XAML code window, remove all attributes of the Map element except for the Name attribute. This lets the Map control fill the available space on the page. The XAML for the Map control now contains the following code.

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

When you get your current location, the code returns a Windows.Devices.Geolocation.Geocoordinate. The code in this helper class converts this Windows.Devices.Geolocation.Geocoordinate to the System.Device.Location.GeoCoordinate expected by the Map control.

To get an extension method to do this conversion, along with other useful extensions to the Maps API, download the Windows Phone Toolkit.

To add a helper class to convert geocoordinates

  1. In Solution Explorer, right-click the project and select Add Class. Name the new helper class CoordinateConverter. Click OK.

  2. Replace the code in the new class file with the following code.

    using System;
    using System.Device.Location; // Provides the GeoCoordinate class.
    using Windows.Devices.Geolocation; //Provides the Geocoordinate class.
    
    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
                    );
            }
        }
    }
    

To show your location on the map

  1. In the MainPage.xaml.cs or MainPage.xaml.vb code file, import the following namespaces.

    using Microsoft.Phone.Maps.Controls;
    using System.Device.Location; // Provides the GeoCoordinate class.
    using Windows.Devices.Geolocation; //Provides the Geocoordinate class.
    using System.Windows.Media;
    using System.Windows.Shapes;
    
  2. In the MainPage.xaml.cs or MainPage.xaml.vb code file, in the MainPage class, create the following new method.

            private async void ShowMyLocationOnTheMap()
            {
            }
    
  3. In the constructor of the MainPage class, add the highlighted code to call the new method when the app runs.

            // Constructor
            public MainPage()
            {
                InitializeComponent();
                ShowMyLocationOnTheMap();
            }
    
  4. In the ShowMyLocationOnTheMap method, add the following code to get your current location. This code uses the CoordinateConverter class that you added to the project in a previous step.

                // Get my current location.
                Geolocator myGeolocator = new Geolocator();
                Geoposition myGeoposition = await myGeolocator.GetGeopositionAsync();
                Geocoordinate myGeocoordinate = myGeoposition.Coordinate;
                GeoCoordinate myGeoCoordinate = 
                    CoordinateConverter.ConvertGeocoordinate(myGeocoordinate);
    
  5. In the ShowMyLocationOnTheMap method, add the following code to make your current location the center of the map.

                // Make my current location the center of the Map.
                this.mapWithMyLocation.Center = myGeoCoordinate;
                this.mapWithMyLocation.ZoomLevel = 13;
    

This sample uses a circle to mark your location on the map. For more info about related tasks, see How to add UIElements to a Map control in Windows Phone 8.

To mark your location on the map

  1. In the ShowMyLocationOnTheMap method, add the following code to create a small blue circle that has a diameter of 20 pixels and is 50 percent opaque.

                // Create a small circle to mark the current location.
                Ellipse myCircle = new Ellipse();
                myCircle.Fill = new SolidColorBrush(Colors.Blue);
                myCircle.Height = 20;
                myCircle.Width = 20;
                myCircle.Opacity = 50;
    
  2. In the ShowMyLocationOnTheMap method, add the following code to create a MapOverlay to contain the circle. This code centers the circle over your current location by using the PositionOrigin and GeoCoordinate properties.

                // Create a MapOverlay to contain the circle.
                MapOverlay myLocationOverlay = new MapOverlay();
                myLocationOverlay.Content = myCircle;
                myLocationOverlay.PositionOrigin = new Point(0.5, 0.5);
                myLocationOverlay.GeoCoordinate = myGeoCoordinate;
    
  3. In the ShowMyLocationOnTheMap method, add the following code to create a MapLayer to contain the MapOverlay.

                // Create a MapLayer to contain the MapOverlay.
                MapLayer myLocationLayer = new MapLayer();
                myLocationLayer.Add(myLocationOverlay);
    
  4. In the ShowMyLocationOnTheMap method, add the following code to add the MapLayer to the map.

                // Add the MapLayer to the Map.
                mapWithMyLocation.Layers.Add(myLocationLayer);
    

When you run the project, you see a map that fills the entire available space in the app’s UI. The map is centered on your current location, and the location is marked with a small blue circle.

Map control with current location

Mostrar:
© 2014 Microsoft