wp7开发_使用BingMaps.doc

Push Notifications Hands-on LabHands-On Lab使用 Bing MapsLab 版本:1.0.0最后更新时间:1/14/2020目录概述3练习 1: Bing Map 控件介绍6任务 1 注册一个 Bing Maps 帐号6任务 2 使用Bing Map 控件9练习 2: 处理和定制 Pushpins26任务 1 创建一个 Pushpins 图层26任务 2 创建一个 Pushpins 目录36练习 3: 计算路线46任务 1 往地图中添加路线46任务 2 显示路线行程56总结66概述Bing Maps Silverlight Control for Windows Phone结合了Silverlight和Bing Maps的功能，提供了增强的地图体验。开发人员可以使用Bing Maps Silverlight 控件将最新位置和本地搜索功能纳入其Windows Phone应用程序中。同时使用Bing Maps Silverlight 控件和Bing Maps SOAP（strategy on a page）服务，您可以创建一个包含有增强地图体验的Windows Phone应用。本实验将带您浏览使用Bing Maps Silverlight Control for Windows Phone所需的步骤，并提供开发Windows Phone 应用程序和 Bing Maps集成应用的快速参考。目标完成本实验的您将: 熟悉Bing Maps for Windows Phone 理解如何使用Bing Map control 和 Data Binding 使用Bing Maps 服务获取地图数据 创建一个简单的基于地图的应用程序，包括完整的图钉和路线层先决条件以下是完成本实验所必须的条件: 用于Windows Phone的Microsoft Visual Studio 2010 Express或者Microsoft Visual Studio 2010 Windows Phone 开发工具 可用的Internet 连接注意:所有的Windows Phone 开发工具都可以从以下网址打包下载 构建为了方便起见，本次实验所使用的大部分代码都作为Visual Studio的代码段提供.要安装代码片段:1. 执行SourceSetup文件夹下的.vsi安装程序。 注释: 如果你在执行代码片段的安装程序时遇到问题，你可以通过拷贝SourceSetupCodeSnippets文件夹下的所有.snippet文件到目录:Visual Studio 2010Code SnippetsVisual C#My Code Snippets来进行手动安装代码段使用代码段通过代码段，你可以随时获取所有你想要的代码。本实验文档将会准确的告诉你什么时候使用它们。例如,图 1使用Visual Studio代码段把代码插入到你的工程里为了把代码段添加到Visual Studio中，你只要把光标放在你想插入的代码上.开始输入段的名字（没有空格和连字号），看到智能感知的段名，当你想要的段名被选中时，敲击Tab键两次，代码将会被插入到光标的位置。图 2开始输入代码段名图 3敲击Tab键来选中高亮的代码段图 4再次敲击Tab键来展开代码段如果想使用鼠标而不是键盘来插入代码段，在你想插入代码段的地方点右键，选择My Code Snippets下面的 InsertSnippet，然后从列表中挑选相关的代码段。想学习更多的Visual Studio代码段，包括如何创建自己的代码段，请参考/en-us/library/ms165392.aspx. 练习本实验包括以下练习:1. Bing Map 控件绍2. 处理与定制Pushpins3. 计算并报告行程完成实验估计耗时: 90 分钟.练习 1: Bing Map 控件介绍本练习你将: 注册一个Bing Maps 帐号并得到私钥 学习Windows Phone中的Bing Silverlight map 控件 向页面添加一个map 控件 将Bing Maps私钥附加到map 控件 在航测图模式和 路线图模式之间 切换 置中并缩放地图到一个地理位置 你将使用Microsoft Visual Studio 2010 Express for Windows Phone 开发环境，并布署到 Windows Phone Emulator 用以调试。我们要使用的解决方案是基于Silverlight for Windows Phone Application 模板的。注意:本实验的步骤演示使用Microsoft Visual Studio 2010 Express for Windows Phone的过程，但它们同样适用于Microsoft Visual Studio 2010 for Windows Phone。一般涉及到Visual Studio的用法说明同样适用于这两种产品。任务 1 注册一个Bing Maps 帐户本任务中你将通过Internet创建一个Bing Maps 帐号 。 Bing Maps帐号中心允许你创建自己的密钥并使用 Bing Maps 控件，Bing Maps SOAP 服务, Bing Maps REST (representational state transfer) 服务以及Bing Spatial Data 服务。如果你已经拥有了密钥，你可以在下一任务中使用它。如果没有有效的密钥，你将不能从Web上获得Bing Maps的内容。1. 打开你的浏览器并输入以下地址: .2. 点击新建来使用你的Windows Live ID创建一个新的 Bing Maps 帐号。图 5Bing maps 注册3. 在下一页中填写你的详细信息。图 6填写Bing maps 帐户详细信息 4. 一旦你已经同意使用条款并注册登录，您就可以选择为自己的应用程序创建一个新的密钥。点击左边的“Create or view keys”链接。图 7创建或显示密钥5. 在下一个页面上填写您的申请信息，然后点击Createkey。图 8创建一个新密钥6. 接下来，你会看到你的新私钥。保存这个密钥，随后你会用到它。图 9保存私钥注意：在下一步的任务中您将被要求使用此私钥。把它放在方便取用的位置，因为你必须使用这个密钥来完成剩余实验。任务 2 使用Bing Map 控件本任务中，您将使用针对Windows Phone的Bing Map Silverlight控件。Bing Map Silverlight控件结合了Silverlight和Bing Maps的能力，提供了增强的地图体验。开发人员可以使用Bing Maps Silverlight 控件将最新地理位置和本地搜索功能纳入其Windows Phone应用程序中。在此任务中，您将使用本实验提供的Microsoft Visual Studio 2010 Express for Windows Phone或Microsoft Visual Studio 2010启动解决方案。该解决方案包括一个不完整的Windows Phone 7应用程序，它的启动代码以及UI行为将有助于您完成本实验。1. 从开始 | 所有程序 | Microsoft Visual Studio 2010 Express | Microsoft Visual Studio 2010 Express for Windows Phone中打开 Microsoft Visual Studio 2010 Express for Windows Phone。2. 在File 菜单中， 选择Open Project。Visual Studio 2010: 在File 菜单中， 指向open 然后选择 Project/Solution.3. 导航到位于本实验SourceEx1-TheBingMapControlBegin文件夹中的starter 工程，选择 Begin.sln ，然后点击Open.图 10打开starting 工程4. 检查打开的工程。这是一个标准的 Windows Phone 应用程序只包含一个页面: MainPage: MainPage.xaml 使用XAML 定义Bing maps UI；实验过程中你可以向本文件中放置UI控件 MainPage.cs 这是一个不完整的类，包含执行Bing maps实验的启动代码，在实验过程中不要更改这个文件 MainPage.xaml.cs 包含map 实验逻辑；本实验过程中map应用程序的逻辑将会被保存在这个文件中o 图标和样式 等资源放在Resources 文件夹中o Helper类放置在Helpers 文件夹中5. 按F5运行 startup 应用程序 你应该能看到下图:图 11运行starter 应用程序6. 在接下来的步骤中，您将使用Bing map控件，并学习如何使用它。首先，添加一个到Microsoft.Phone.Controls.Maps的引用图 12添加引用到 map 控件 7. 在设计模式下打开 MainPage.xaml ，从工具箱找到Map 控件，拖动到页面中央这会在Windows Phone中添加. XAML 名称空间并创建一个 Bing map 控件实例图 13设计时的Map 控件8. 使用XAML编辑器打开 MainPage.xaml ，您应该可以找到如下标记:XAML 9. 修改 map 名称为 Map并删除 它的Height 和 Width 属性，这样这个 map 就会 扩展到整个屏幕XAML10. 按 F5 来检查这个map.图 14Bing map 控件注意：当您第一次通过双击放大地图，将显示以下消息：无效的凭据。注册一个开发者帐号了。要删除此消息，您应该在当前map中使用前面创建的Bing Maps私钥11. 打开App.xaml.cs 文件并在此类中添加一个新的 内部字符串常量字段 ，命名为”ID”这个字段用于保存你创建的 Bing Maps 私钥在本实验过程中你将会使用这个私钥来创建Bing Map控件和Bing服务凭据(Code Snippet Using Bing Maps Ex 1 Task 2 Step 11 Id Const)C#internal const string Id = your Bing maps private key;12. 打开 MainPage.xaml.cs 文件并在类声明上面添加以下using 语句 (Code Snippet Using Bing Maps Ex 1 Task 2 Step 12 Using statements)C#using System;using System.Device.Location;using Microsoft.Phone.Controls.Maps;13. 现在我们已经有了私钥，我们接下来把密钥绑定到map控件为此需要：: 在MainPage中找到 “Fields”域 创建一个新的私钥只读字段类型Microsoft.Phone.Controls.Maps.CredentialsProvider 使用你刚才添加到App类的私钥初始化一个该类的实例(Code Snippet Using Bing Maps Ex 1 Task 2 Step 13 CredentialsProvider Field)C#private readonly CredentialsProvider _credentialsProvider = new ApplicationIdCredentialsProvider(App.Id);注意:如果没有为Microsoft.Phone.Controls.Maps添加using语句，你应该通过使用全限定类名或添加所需的using语句解决这个问题。本实验中的几个代码片段均假定你已经了解如何解决这种问题。14. 在MainPage类中找到 “Properties” 域，公开你刚才创建的字段 为public 字段，并命名为 CredentialsProvider ，这样你就可以把它绑定到map 控件(Code Snippet Using Bing Maps Ex 1 Task 2 Step 14 CredentialsProvider Property)C#public CredentialsProvider CredentialsProvider get return _credentialsProvider; 15. 在XAML编辑器中打开 MainPage.xaml ，并将您刚才创建的public 属性绑定到Map.CredentialsProvider XAML注意:MainPage.DataContext由MainPage实例本身在MainPage.cs文件中设置，所以隐式的绑定源就是MainPage实例本身。16. 重新按 F5 测试应用程序放大地图，你可以发现前面显示的消息已经消失17. 在XAML模式中打开MainPage.xaml，使用 标签设置Map.Mode 属性为 AerialMode 这会改变地图模式为航测图模式而不是默认的路线图模式 XAML 18. 我们往应用程序栏中增加了一个按钮，用来改变地图的模式。这个按钮的Click事件，通过调用位于“Tasks”域的ChangeMapMode方法处理。在MainPage.xaml.cs中，找到MainPage 类中的“Tasks”域，你就会发现ChangeMapMode方法。如果要添加代码来转换地图模式，只需通过建立Microsoft.Phone.Controls.Maps.AerialMode或者Microsoft.Phone.Controls.Maps.RoadMode类型的新实例来设置Map.Mode 属性。(Code Snippet Using Bing Maps Ex 1 Task 2 Step 18 ChangeMapMode)C#private void ChangeMapMode() if (Map.Mode is AerialMode) Map.Mode = new RoadMode(); else Map.Mode = new AerialMode(true); 19. 按 F5来测试结果 要切换视图，点击 应用程序栏的“eye” 按钮就会调用 ChangeMapMode 方法图 15航测图模式图 16路线图模式注意: Silverlight Map 控件针对 Windows Phone设计成支持数据绑定模式。使用数据绑定改变地图控件的属性是在数据模板中处理数据对象的好方法，也是减弱地图控件与后台逻辑耦合性的最佳做法，尤其是当使用MVVM（model view ViewModel）模式的时候。为了简化本实验，我们没有使用地图视图本身的数据模板，因此逻辑直接由后面的MainView代码实现。从现在起，我们将充分利用map控件的数据绑定功能，当然这些地图控件的属性也可以直接从后面的代码来改变。20. 为了从底部删除Bing 图标和版权，你可以将Map.CopyrightVisibility 和 Map.LogoVisibility的值均设置为Visibility.Collapsed.XAML 您可能会注意到，你可以通过双击使地图放大此选项是由地图控件内部实现的。你也可以选择显示内置变焦条，通过设置Map.ZoomBarVisibility为Visible即可实现，但你不能改变按钮样式或位置。接下来，您将添加自定义的变焦按钮，从而你可以自由地放大或缩小。21. 在MainPage.xaml.cs文件中，添加一个新的private字段，类型为 double.(Code Snippet Using Bing Maps Ex 1 Task 2 Step 21 Zoom Field)C#private double _zoom;22. 找到 “Consts” 域并添加三个额外的double常量字段 来限制变焦倍数: DefaultZoomLevel = 18.0 MaxZoomLevel = 21.0 MinZoomLevel = 1.0.(Code Snippet Using Bing Maps Ex 1 Task 2 Step 22 Zoom Level Consts)C#private const double DefaultZoomLevel = 18.0;private const double MaxZoomLevel = 21.0;private const double MinZoomLevel = 1.0;23. 在 MainPage.xaml.cs中，找到名为 Zoom的public 属性，修改为从_zoom字段取值或者赋值。在setter函数中，要考虑你添加的变焦倍数限制并关注属性的变化。(Code Snippet Using Bing Maps Ex 1 Task 2 Step 23 Zoom Property)C#public double Zoom get return _zoom; set var coercedZoom = Math.Max(MinZoomLevel, Math.Min(MaxZoomLevel, value); if (_zoom != coercedZoom) _zoom = value; NotifyPropertyChanged(Zoom); 24. 在XAML编辑器中打开MainPage.xaml并绑定你刚才修改的Zoom 属性到 Map.ZoomLevel，绑定模式为双向绑定。XAML 25. 从工具箱中拖动两个按钮到地图控件的中间左侧，一个用于放大，另一个用于缩小。XAML 26. 注册相应按钮的Click事件到ButtonZoomIn_Click和ButtonZoomOut_Click事件处理函数。 事件处理函数已经包含在 MainView.cs 文件中。事件处理函数每次被调用的时候， ButtonZoomIn_Click事件处理函数将 Zoom 属性的值加， ButtonZoomOut_Click 事件处理函数则将 Zoom 属性的值减。XAML 27. 要改变放大和缩小按钮的外观和感受，使用XAML模式打开 MainView.xaml 并设置 Button.Style 属性为ButtonZoomInStyle 或者ButtonZoomOutStyle 样式。这些样式由 starter solution 提供，位于DefaultStyle.xaml 资源文件中。XAML 28. 按 F5测试效果，点击zoom-in 和 zoom-out 按钮.图 17缩小图 18放大在接下来的步骤中，您将把您的地理位置移动到地图中心。由于这个实验是在模拟器上工作，你没有一个真正的GPS设备，所以你必须使用经纬度坐标预先定义的地理位置。注意: 您可以通过访问/maps定义您的地理位置，然后从位置栏拷贝经纬度坐标。29. 添加一个引用到System.Device 组件.图 19引用 System.Device30. 在MainPage.xaml.cs中，添加一个新的System.Device.Location.GeoCoordinate类型的静态只读字段，命名为DefaultLocation，并使用您的经度和纬度坐标来实例化它。这将被当作您的当前位置。(Code Snippet Using Bing Maps Ex 1 Task 2 Step 30 DefaultLocation Field)C#private static readonly GeoCoordinate DefaultLocation = new GeoCoordinate(47.639631, -122.127713);31. 在MainPage.xaml.cs中，添加一个新的System.Device.Location.GeoCoordinate类型的字段，命名为 _center。32. _center.(Code Snippet Using Bing Maps Ex 1 Task 2 Step 31 Center Field)C#private GeoCoordinate _center;33. 创建名称为Center属性来公开_center字段。在setter函数中，调用关注属性的变化的方法NotifyPropertyChanged。(Code Snippet Using Bing Maps Ex 1 Task 2 Step 32 Center Property)C#public GeoCoordinate Center get return _center; set if (_center != value) _center = value; NotifyPropertyChanged(Center); 34. 在MainPage.xaml中，绑定 Map.Center 属性到您刚刚创建的Center 属性，绑定模式为双向。XAML .35. 在MainPage.xaml.cs中找到CenterLocation 方法，应用程序栏左边第一个按钮的事件处理函数会调用这个方法。修改Center 和 Zoom为默认值。(Code Snippet Using Bing Maps Ex 1 Task 2 Step 34 CenterLocation Method)C#private void CenterLocation() Center = DefaultLocation; Zoom = DefaultZoomLevel;36. 按F5 测试应用程序，点击应用程序栏左边的目的地图标。将会放大地图并将DefaultLocation字段提供的位置放在地图中心。图 20放大地图并将默认位置放在地图中心本练习至此结束。注意: 本练习的完整解决方案位于以下位置: SourceEx1-TheBingMapControlEnd.练习 2: 处理和定制Pushpins本练习你将: 学会如何使用map 图层与数据绑定 创建一个 pushpin 图层 添加一个pushpin 来标识当前位置 处理 pushpin 点击 从编录添加 pushpins 到map 定制 pushpin 的外观与感受你将使用Microsoft Visual Studio 2010 Express for Windows Phone 开发环境，并布署到 Windows Phone Emulator 用以调试。我们要使用的解决方案以前面的练习为基础。任务 1 创建一个 pushpin 图层本任务中你将学习到如何创建map图层并学会如何使用pushpin与数据绑定来填充它。一个map图层由Microsoft.Phone.Controls.Maps.MapLayer类型的定制面板布局。使用MapLayer 面板你可以在map顶部拥有 所有类型的UIElement。 MapLayer 面板知道如何在map上展开这些元素。一个map 控件可以没有图层也可以有多个图层。尽管我们可以直接从后台代码为MapLayer面板添加或删除可视项目，但是我们还是使用数据绑定方式产生map图层。这里我们将使用另一个类型为Microsoft.Phone.Controls.Maps.MapItemsControl的控件而不是直接使用MapLayer 。这个 ItemsControl 缺省情况下使用 MapLayer 面板来布局项目。1. 打开位于本实验SourceEx1-TheBingMapControlBegin文件夹中的starter 工程注意: 你应该在App类中使用你前一练习中创建的私钥设置Bing Maps 应用程序 Id.2. 要往map中添加一个新的pushpins图层，在XAML编辑器中打开MainPage.xaml，在zoom 按钮前面添加一个MapItemsControl 元素作为map 控件的子项，这样按钮就会在最上层呈现。这就是我们的pushpins 图层。XAML 3. 要产生有pushpins数据的新pushpins 图层，创建一个名称为Models的新工程文件夹。4. 在Models 文件夹下面，创建一个新的公用类，命名为PushpinModel这个类用于呈现pushpin 数据.图 21Pushpin 模型5. 为PushpinModel添加一个名称为Location新的公共属性，类型为System.Device.Location.GeoCoordinate PushpinModel。这个属性 指示pushpin在map上的地理位置。(Code Snippet Using Bing Maps Ex 2 Task 1 Step 5 Location Property)C#public class PushpinModel public GeoCoordinate Location get; set;