2(共 2)对本文的评价是有帮助 - 评价此主题

Windows Phone 8 地图和导航

2013/12/5

适用于:仅限于 Windows Phone 8。

您可以使用 Windows Phone 8 中新的地图 API 来开发基于地图的应用以及合并位置和搜索功能。本主题介绍了新的地图控件、地图模式以及地图视图。

说明注意:

Windows Phone 8 中新的地图 API 与 Windows Phone OS 7.1 中提供的必应 Bing 地图不同。Bing 地图控件仍在 Windows Phone 8 中受支持,但已被弃用。通常,仅在您从 Windows Phone OS 7.1 升级到 Windows Phone 8 的现有应用中才应该使用必应 Bing 地图控件。

Icon to indicate an SDK sample

要获取演示本主题中描述的某些任务的示例,请下载简单地图控件示例

对于地图 API 的有用扩展(包括别针),请下载 Windows Phone 工具包

本主题包含以下各节。

要在您的 Windows Phone 8 应用中显示地图,请使用 Map 控件。有关详细信息,请参见如何将地图控件添加到 Windows Phone 8 中的页面中

重要说明重要说明:

要使用控件,您必须在应用清单文件中选择 ID_CAP_MAP 功能。有关详细信息,请参见如何修改 Windows Phone 的应用清单文件

使用 XAML 显示地图

以下代码示例显示了如何使用 XAML 在您的 Windows Phone 8 应用中显示 Map 控件。


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <maps:Map />
</Grid>

如果您通过编写 XAML 添加控件,您还需要将以下 xmlns 声明添加到 phone:PhoneApplicationPage 元素。如果您从工具箱拖放地图控件,将自动添加此声明。

xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"

使用代码显示地图

以下代码示例显示了如何使用代码在您的 Windows Phone 8 应用中显示 Map 控件。

using Microsoft.Phone.Maps.Controls;

...

    Map MyMap = new Map();
    ContentPanel.Children.Add(MyMap);

使用内置启动器显示地图

本主题介绍了如何编写用于在应用中显示地图的代码。如果只想显示地图,您也可以使用地图任务,它将启动内置“地图”应用。有关详细信息,请参见如何使用 Windows Phone 的地图任务

下表列出了可以显示或管理地图的所有内置启动器。有关启动器的详细信息,请参见 Windows Phone 启动器和选择器

启动器

详细信息

地图任务

启动内置“地图”应用,并标记位置(可选)。

如何使用 Windows Phone 的地图任务

地图路线任务

启动内置“地图”应用,并显示路线。

如何使用 Windows Phone 的地图路线任务

MapDownloader 任务

下载地图以供脱机使用。

如何使用 Windows Phone 的 MapDownloader 任务

MapUpdater 任务

检查用户之前已下载的脱机地图的更新。

如何使用 Windows Phone 的 MapUpdaterTask

显示地图后,您首先可能想做的事情之一是设置其中心和缩放级别。

说明注意:

在初始化地图控件期间,在每次初始化后将引发一次 CenterChangedZoomLevelChanged 事件。如果您处理这些事件,请确保当事件在控件初始化之后和发生任何用户交互之前的时段内被引发时,您的代码可以正确处理首次发生的情况。

指定地图的中心

可以使用控件的 Center 属性来设置 Map 控件的中心。要使用 XAML 设置属性,请将一个(纬度,经度)对分配给 Center 属性。

以下代码示例演示了如何使用 XAML 设置 Map 的中心。


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" />
</Grid>


以下代码示例演示了如何使用代码设置 Map 的中心。

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    ContentPanel.Children.Add(MyMap);
}

警告说明警告:

不要使用 Latitude 属性和 Longitude 属性来设置地图控件的中心。而是创建新的 GeoCoordinate 对象并将其分配给 Center 属性(如前一个代码示例中所示)。

指定地图的缩放级别

使用 ZoomLevel 属性设置您要用来显示地图的初始分辨率。ZoomLevel 接受从 1 到 20 的值,其中 1 对应于完全放大地图,并且缩放级别越高,放大所采用的分辨率也更高。以下代码示例显示了如何在 XAML 和代码中通过使用 ZoomLevel 属性设置地图的缩放级别。

以下代码示例显示了如何在 XAML 中通过使用 ZoomLevel 属性设置地图的缩放级别。


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" ZoomLevel="10"/>
</Grid>


以下代码示例显示了如何在代码中通过使用 ZoomLevel 属性设置地图的缩放级别。

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 10;
    ContentPanel.Children.Add(MyMap);
}

地图控件的 Center 属性要求来自 System.Device.Location 命名空间的 GeoCoordinate 的类型的值。如果您正在使用 Windows.Devices.Geolocation 命名空间的位置服务,您需要将 Windows.Devices.Geolocation.Geocoordinate 值转换为 System.Device.Location.GeoCoordinate 值以与地图控件结合使用。

您可以采用扩展方法来执行此转换,同时对地图 API 采用其他有用的扩展,方法是下载 Windows Phone 工具包。如果您要编写自己的代码,下面是您可以用来将 Geocoordinate 转换为 GeoCoordinate 的方法的示例:

using System;
using System.Device.Location; // Contains the GeoCoordinate class.
using Windows.Devices.Geolocation; // Contains the Geocoordinate class.

namespace CoordinateConverter
{
    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
                );
        }
    }
}

您也可以在地图上显示其他元素,例如地标和步行街构造。

  • 地标。LandmarksEnabled 属性设置为 true 以在 Map 控件上显示地标。仅当 ZoomLevel 属性被设置为 16 或更高的值时,地标才在地图上可见。

  • 步行街构造。Map 控件上将 PedestrianFeaturesEnabled 设置为 true,以显示步行街功能(如公共楼梯)。仅当 ZoomLevel 属性被设置为 16 或更高的值时,步行街功能才在地图上可见。

下图显示了具有地标和步行街构造的地图。

Landmarks and Pedestrian Features

以下示例显示了如何在 XAML 中设置 PedestrianFeaturesEnabled 属性和 LandmarksEnabled 属性。

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map Center="47.6097, -122.3331" ZoomLevel="16" LandmarksEnabled="true" PedestrianFeaturesEnabled="true"/>
        </Grid>

以下示例显示了如何在代码中设置这些属性。

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 16;
    MyMap.LandmarksEnabled = true;
    MyMap.PedestrianFeaturesEnabled = true;
    ContentPanel.Children.Add(MyMap);
}

设置地图的中心和缩放级别后,您还可能想要设置地图的制图模式。制图模式将定义 Map 控件上坐标系的显示以及坐标系从屏幕坐标到世界坐标的转换。您可以使用 Map 控件的 CartographicMode 属性设置地图的制图模式。此属性接受 MapCartographicMode 枚举中的值。以下类型的制图模式在 MapCartographicMode 枚举中受支持。

  • Road:显示正常的默认二维地图。

  • Aerial:显示航测图。

  • Hybrid:显示与道路和标签重叠的地图的“航测”视图。

  • Terrain:为显示的高地和水域构造(例如高山和河流)显示自然地形图像。

下图显示了四种制图模式。

Cartographic Modes

以下示例采用了默认 Road 模式来显示地图。可以使用应用栏中的按钮,以 AerialHybridTerrain 模式来查看地图。

说明注意:

要测试以下示例,您必须在项目中创建“Images”文件夹并提供用于应用栏按钮的图像。

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="map modes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>
   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Road" Click="Road_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Aerial" Click="Aerial_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button3.png" Text="Hybrid" Click="Hybrid_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button4.png" Text="Terrain" Click="Terrain_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
void Road_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Road;
}

void Aerial_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Aerial;
}

void Hybrid_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Hybrid;
}

void Terrain_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Terrain;
}

可通过使用 ColorMode 属性,以浅色或深色模式来显示地图。该属性可以接受的值(LightDark)是包含在 MapColorMode 枚举中的指定值。默认值为 Light

在下图中,第一幅地图采用的是 Light 颜色模式,第二幅地图采用的是 Dark 颜色模式。

Color Modes

以下代码示例采用了默认的浅色模式来显示地图。可以使用应用栏中的按钮,以浅色或深色模式查看地图。

说明注意:

要测试以下示例,您必须在项目中创建“Images”文件夹并提供用于应用栏按钮的图像。

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="color modes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map x:Name="MyMap" />
        </Grid>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Light" Click="Light_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Dark" Click="Dark_Click"/>
        </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
void Light_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Light;
}

void Dark_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Dark;
}

地图应用中一个常用的方案是:从地图中某个位置移动到另一个位置,或者从一个视图移动到另一个视图。每当平移、缩放、旋转或倾斜导致地图的位置发生更改时,都将定义新的地图视图。

使用 SetView 方法在代码中定义地图视图。您可以将以下参数传递到 SetView 方法的重载:视图的中心、缩放级别、行进方向、间距、LocationRectangle 和用于从一个视图转到另一个视图的动画。

SetView 参数

下表介绍了 SetView 方法的参数。

  • center:使用此参数以传递地图视图的中心。它定义为 GeoCoordinate 对象。

  • zoomLevel:此参数表示地图上可用的各种详图级别。它可接受从 1 至 20 的值。可用的最大详图级别由您正在放大的位置所决定。与其他区域相比,某些区域还可以进一步放大。缩放级别越高表示地图中视图的缩放程度也更高。缩放级别为 1 表示最大缩小级别的视图。

  • heading:此参数指定地图上标记的“前进”航向。将使用值介于 0 到 360 之间的几何度数表示该参数,以指示地图要旋转的度数。例如,0 或 360 表示北方,90 表示西方,180 表示南方以及 270 表示东方。下图详细描述了行进方向。

    Heading
  • pitch:此参数指定地图要倾斜的度数。它由介于 0 到 180 之间的值表示,以指示地图要倾斜的度数。下图详细描述了间距。

    Pitch
  • boundingRectangle:此参数表示一个包含 Map 控件的 LocationRectangle 对象。

  • animationKind:使用此参数设置当视图更改时您希望用户看到的动画。可以在 MapAnimationKind 枚举中找到可用的动画设置。如果您将 None 传递为 animationKind 参数,则地图将捕捉到新的视图而不是对视图更改进行动画处理。

动画示例

以下示例显示了具有默认中心和缩放级别的地图。在应用栏中单击“更改”按钮时,它将显示具有新的中心和缩放级别的地图。单击“动画”按钮时,地图将采用动画效果转换到新的中心和缩放级别。


<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>

   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="MapView" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>

   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>

<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton x:Name="BtnZoom"  IconUri="/Images/appbar_button2.png" Text="Change" Click="OnCenterZoom_Click"/>
      <shell:ApplicationBarIconButton x:Name="BtnCenter"  IconUri="/Images/appbar_button1.png" Text="Animate" Click="OnAnimate_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


void OnCenterZoom_Click(object sender, EventArgs args)
{
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
   MyMap.ZoomLevel = 18;
}

void OnAnimate_Click(object sender, EventArgs args)
{
   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);
}

要在您的应用中使用应用服务,您需要在应用代码中包含地图服务应用程序 ID 和令牌。有关详细信息,请参见如何将地图控件添加到 Windows Phone 8 中的页面中

对地图服务的继续使用受到使用条款的控制。Microsoft 可能与 Nokia 共享使用地图服务的开发人员 ID,因为 Nokia 可提供其中某些服务。

本文是否对您有所帮助?
(1500 个剩余字符)
感谢您的反馈
显示:
© 2014 Microsoft. 版权所有。