---

2017 年 4 月

第 32 卷，第 4 期

此文章由机器翻译。

新式应用程序 - 探索地图控件

通过 Frank La La

映射真正为移动设备的强大功能之一。用手在智能手机，您可以熟练地导航浏览新的城市，查找所有的好地方吃，获取对交通状况的实时更新，即使找到了新的路由 — 一个速度更快是否可用。映射还可以帮助您直观显示数据点或提供快速搜索的本地服务的用户。

映射已经真正改变用户与他们的设备和其世界交互的方式。幸运的是，通用 Windows 平台 (UWP) 配备了完全正常运行的地图控件，它利用的强大功能和图像 Bing 的映射服务。在本月的专栏中，我浏览地图控件，并显示将添加到您的应用程序是多么容易。

设置项目

通过从“文件”菜单中选择新项目，在 Visual Studio 中创建新的空白 UWP 项目。展开安装的模板 |Windows |空白应用 (通用 Windows)。MapControl 为项目命名，然后单击确定。之后，将出现一个对话框，询问您的 Windows 应用程序应为目标的版本。对于此项目，默认选项是没有什么问题，因此您可以单击确定。

打开 MainPage.xaml 文件，并将以下命名空间声明添加到页面标记︰

xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"

这样，在 XAML 中的元素的页面控件通过使用映射到可寻址 Windows.UI.Xaml.Controls.Maps 命名空间的元素︰ 前缀。有关 XAML 命名空间和 Namespace 映射的详细说明，Windows 开发人员中心对详细的文章在这个问题 bit.ly/2jwcO2D。

添加映射控件

若要将地图添加到此应用程序，只需添加下面的 XAML:

<maps:MapControl x:Name="mapControl" >
  </maps:MapControl>

通过按 F5 或从调试菜单中选择开始调试运行解决方案。您的应用程序看上去应类似图 1。请注意，可以单击并拖动鼠标要对其导航的映射。双击会放大点上。此外，触摸手势还操作地图控件。您还会发现在控件指出的左下角的红色文本"警告︰ MapServiceToken 未指定的。"

图 1 基本地图控件

地图控件使用图像和其他服务，例如流量数据，从 Bing 地图。相应地，Bing 团队想要审核哪些帐户驱动器使用情况的功能。这有助于限制滥用行为，并为每个人都保持成本较低。若要删除的警告消息，您将需要从 Bing Maps 适用于开发人员中心获取 MapServiceToken。在大多数情况下，使用 Bing 地图服务将不再存在。有关定价详细信息，请参阅定价图表为基本和企业组合键， bit.ly/2j6o96x。 

正在注册的 Bing 地图服务令牌

在浏览器中，转到 bingmapsportal.com、 单击登录，并使用你的 Microsoft 帐户凭据登录。在登录页上，单击我的帐户菜单，然后选择我的密钥，如中所示图 2。

图 2 访问我的密钥在 Bing Maps 适用于开发人员中心

如果在注册后与以前的 Bing 地图的键，则它们将显示在列表中，如中所示图 3。若要创建新的注册表项，请单击选项，表明"单击此处以创建新的密钥。"

图 3 以前注册密钥的列表的我的密钥页

窗体将会出现询问有关应用程序可为其创建该密钥的信息 (请参阅图 4)。命名应用程序中，为应用程序类型的密钥类型和通用 Windows 应用程序选择 Basic。应用程序 URL 是可选的。单击创建，并使用新密钥，则会显示。将其复制并返回到 MainPage.xaml 文件。修改 XAML，以添加 MapServiceToken 属性并粘贴密钥作为其值，如下所示︰

<maps:MapControl x:Name="mapControl" MapServiceToken="{Insert Key Here}" >
  </maps:MapControl>

图 4 创建密钥的窗体

再次运行该解决方案并警告消息将消失。

控制与代码映射

如您所见，将地图控件添加到 UWP 是变得相当容易的应用程序。该控件甚至来自，允许用户操作地图的中心点和缩放级别有一种鼠标或触控。该映射会更有用，如果它无法在代码中操作。例如，它很有用若要更改的映射的样式，以便它可以显示空中图像或地形数据与不只是默认道路视图中所示图 1。

更改地图样式

地图控件类型 MapStyle 的样式属性都有一个枚举。例如，若要更改该地图以显示空中图像叠加在它们的道路，所有步骤就是这行代码︰

mapControl.Style = MapStyle.AerialWithRoads;

若要实现的选项选择任何可用 MapStyle，应用程序将需要一些其他控件。将下面的网格定义添加到 MainPage.xaml 文件中的页控件上的网格创建一些空间，您将要添加的控件︰

<Grid.RowDefinitions>
  <RowDefinition Height="50*"/>
  <RowDefinition Height="50*"/>
  <RowDefinition Height="577*"/>
</Grid.RowDefinitions>

接下来，向该地图控件添加了一个 Grid.Row 属性，并将其值设置为 2。

现在，在 StackPanel 中添加下面的按钮控件︰

<StackPanel Orientation="Horizontal" Grid.Row="0">
  <Button Content="Roads" Click="Button_Click" Margin="3" />
  <Button Content="Aerial" Click="Button_Click" Margin="3" />
  <Button Content="Aerial With Roads" Click="Button_Click" Margin="3"/>
  <Button Content="Terrain" Click="Button_Click" Margin="3" />
  <Button Content="3D Aerial" Click="Button_Click" Margin="3" />
  <Button Content="3D Aerial With Roads" Click="Button_Click" Margin="3"/>
</StackPanel>

在 MainPage.xaml.cs 文件中，添加事件处理程序代码中的图 5以确定已单击的按钮，并将该映射设置为相应的样式。

图 5 事件处理程序代码

private void Button_Click(object sender, RoutedEventArgs e)
  {
    var senderButton = sender as Button;
    var buttonTest = senderButton.Content.ToString();
    switch (buttonTest)
    {
      case "Aerial":
      mapControl.Style = MapStyle.Aerial;
      break;
    case "Aerial With Roads":
    mapControl.Style = MapStyle.AerialWithRoads;
    break;
    case "Terrain":
      mapControl.Style = MapStyle.Terrain;
      break;
    case "3D Aerial":
      mapControl.Style = MapStyle.Aerial3D;
      break;
    case "3D Aerial With Roads":
      mapControl.Style = MapStyle.Aerial3DWithRoads;
      break;
    default:
    mapControl.Style = MapStyle.Road;
    break;
  }
}

现在运行应用程序和浏览代码图使用不同的样式。还要注意，当使用其中一个 3D 视图，该控件，再次重申，所有鼠标和触摸功能将自动都处理。

放大和缩小

默认情况下，该映射将被完全缩放，提供整个地球的视图。这可能不是适用于大量的目的。将出现在控件有一个双调用设置的缩放级别距离放大或缩小代码图的类型的属性的映射。值范围为 1 到 20，一直放大 1 和 20 显示整个世界。在此范围之外的值将被忽略。

添加放大和缩小到应用程序是非常简单。首先，将下面的 XAML 元素添加到网格控件中的 MainPage.xaml 文件中︰

<StackPanel Orientation="Horizontal" Grid.Row="1">
  <Button x:Name="btnZoomIn" Content="Zoom In" Click="btnZoomIn_Click"
    Margin="3" />
  <Button x:Name="btnZoomOut" Content="Zoom Out" Click="btnZoomOut_Click"
    Margin="3" />
</StackPanel>

接下来，添加以下两个事件处理程序的两个按钮︰

private void btnZoomIn_Click(object sender, RoutedEventArgs e)
{
  mapControl.ZoomLevel = mapControl.ZoomLevel + 1;
}
private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
  mapControl.ZoomLevel = mapControl.ZoomLevel - 1;
}

在地图上放置标记

映射软件的另一个有用的功能是能够将标记放置在感兴趣的各个点上。这可能是指出的是本地的焦点处的好办法。地图控件这很简单，也能使。对于本例，请在位于华盛顿特区华盛顿纪念碑上放置标记华盛顿纪念碑地理空间坐标是 38.8895 北部和 77.0353 西部。若要执行此操作，请将下面的代码添加到 MainPage.xaml.cs 文件中︰

private void LoadMapMarkers()
{
  MapIcon landmarkMapIcon = new MapIcon();
  landmarkMapIcon.Location = new Geopoint(
    new BasicGeoposition() { Latitude = 38.8895, Longitude = -77.0353 } );
  landmarkMapIcon.Title = "Washington Monument";
  mapControl.MapElements.Add(landmarkMapIcon);
}

接下来，从 MainPage 构造函数方法中调用函数。

现在运行应用程序，您将看到一个标记已置于华盛顿 （哥伦比亚特区） 中的映射完全华盛顿纪念碑所处的位置。

纬度和经度

可以由一个坐标系统，用于测量从赤道和在英国格林威治的本初子午线的角距离表示地球上的所有点。中度南极在-90 到 90 在北极南北北纬度度量值。东度经度度量值或从-180 到 180 度西部。

查看流量数据

必应跟踪从世界各地的城市的交通流量数据和地图控件可以非常轻松地覆盖此地图上的数据。若要将此功能添加到应用程序，请到 MainPage.xaml 文件紧接在缩小按钮之后添加以下标记︰

<CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"
  Margin="3">Show Traffic</CheckBox>

然后将以下事件处理程序添加到 MainPage.xaml.cs 文件中︰

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
  mapControl.TrafficFlowVisible = true;
}
private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
  mapControl.TrafficFlowVisible = false;
}

运行该应用程序、 检查显示流量复选框，并缩放到主要城市不限。在 8 或更大的缩放级别时，将仅显示通信数据。

地理位置

现在，该应用程序有多个控件，若要更改地图的样式，放大或缩小，以及甚至可以显示通信流数据。它将地图控件来初始化在用户的当前位置附近有帮助。这样一来，用户可以快速获取其本地周围环境以及附近的交通状况的视图。若要执行此操作，您将需要启用 Package.appxmanifest 文件中的位置功能中所示图 6。在 Visual Studio 中，双击解决方案资源管理器窗格中的 Package.appxmanifest 文件。在编辑器中，确保选中位置旁边的复选框。保存文件。现在，应用程序带有定位功能。

图 6 应用程序启用定位功能

在 MainPage.xaml 文件中添加下面的按钮控件︰

<Button x:Name="btnCurrentLocation" Content="Current Location"
  Click="btnCurrentLocation_Click" Margin="3"/>

并在 MainPage.xaml.cs 文件中添加以下事件处理程序︰

private async void btnCurrentLocation_Click(object sender, RoutedEventArgs e)
{
  var locationAccessStatus = await Geolocator.RequestAccessAsync();
  if (locationAccessStatus == GeolocationAccessStatus.Allowed)
  {
    Geolocator geolocator = new Geolocator();
    Geoposition currentPosition = await geolocator.GetGeopositionAsync();
    mapControl.Center = new Geopoint(new BasicGeoposition()
    {
      Latitude = currentPosition.Coordinate.Latitude,
      Longitude = currentPosition.Coordinate.Longitude
    });
    mapControl.ZoomLevel = 12;
  }
}

BtnCurrentLocation_Click 方法首先查询应用程序的访问状态已为它的定位对象。在第一次在用户的系统运行的应用程序，系统将显示一个类似于中所示的对话框图 7。如果用户单击是，代码将获取当前位置中定位。然后，代码中心上的纬度和经度提供的地图。如果尚未添加定位功能，则不会具有甚至已提示用户与对话框。

图 7 向用户请求访问的精确位置信息的权限

现在运行应用程序，单击当前位置按钮，单击是如果系统提示您。或非常接近，您当前的位置，您应该看到中映射的焦点。精度取决于多种因素。如果您的设备连接到 GPS 接收器，则精确性将会非常高 — 可能降到大约 10 米。如果您的设备缺少 GPS 接收器，定位依赖于其他方法来确定位置，例如使用 Wi-fi。有关 Wi-fi 定位的工作原理的详细信息，请参阅在的 Wikipedia 条目 bit.ly/2jWvmWM。如果 Wi-fi 不可用，定位将使用客户端设备的 IP 地址来确定的位置，其中的 VPN 连接和其他因素可以大大降低准确性。

总结

映射是真正的移动设备更重要的功能之一。许多应用程序能够利用添加地图控件来实现数据可视化效果或帮助用户查找附近的服务。在本专栏中，您所看到的将映射到您的应用程序和程序，添加在大多数情况下是多么简单，对映射服务的访问，不需要购买说到开发人员。

---

Frank La Vigne 是一名独立顾问，他致力于帮助客户利用技术来创造一个更好的社区。定期在他的博客 FranksWorld.com并且具有通道调用的 Frank 世界电视 YouTube (FranksWorld.TV)。

衷心感谢以下技术专家对本文的审阅： Rachel Appel