Bing Map学习系列.docx
《Bing Map学习系列.docx》由会员分享，可在线阅读，更多相关《Bing Map学习系列.docx（41页珍藏版）》请在冰豆网上搜索。
BingMap学习系列
【BingMap学习系列】
（1）——开发前的准备工作
微软推出的BingMaps地图引擎，对外开放了Silverlight和Ajax两种客户端API，同时微软针对全球地图还推出了BingMaps的Silverlight控件，该控件基于Silverligt3发布。
本篇将以这个控件为基础，简单介绍些基于BingMaps 的Silverlight控件开发的环境搭建和其他相关准备工作。
因为BingMapsSilverlightControl是基于Silverlight3发布，那么就要求开发环境是搭建在Silverlight3之上，并且还需安装VisualStudio2008SP1 和 MicrosoftSilverlight3ToolsforVisualStudio2008SP1 。
除此之外就是最重要是BingMapsSilverlightControl了。
一、下载中心
在进行开发前，必须将以下所有工具安装成功，否则将无法进行后面的开发工作。
地址已经收集好了，直接点击即可进行（注意语言的统一）。
1、VisualStudio2008SP1：
2、MicrosoftSilverlight3ToolsforVisualStudio2008SP1：
3、BingMapsSilverlightControl
二、获取BingMap开发Key
为了进行BingMap开发，你需要在Map账户，然后通过BingMaps账户管理中心创建Key，使用WindowsLiveID登录账户管理中心就可以完成创建，每个LiveID可以创建5个开发Key，如下图示：
有了开发Key接着来就可以进行基于Silverlight的BingMaps相关的功能开发了。
你目前可能还没有弄清楚为什么要用这些Key，官方给出的理由就是（youneedaBingMapsKeytoauthenticateyourapplication，你需要一个BingMapKey来鉴别你的应用程序），你注意保存这个Key，因为在后续开发将会用到，同时在下一个章节，我会详细贴出代码，告诉你如何引入Key。
我的Key为：
AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1
三、相关资料
你可以通过BingMap给出的指南手册进行相关的学习，也可以通过以下一些资料进行对BingMap的认识。
总体而言，真的很强大：
MSDN:
官方：
中国BingMaps:
下一个章节将详细介绍如何利用BingMap进行项目开发。
敬请关注。
【BingMap学习系列】
（2）——如何通过BingMapsSilverlightControl显示地图
前一篇文章《【BingMap学习系列】
（1）——开发前的准备工作》Map的开发环境，以及一些准备工作，包括下载相关软件、准备BingMapKey。
这个Key是用来做什么的呢？
Silverlight控件在做地图呈现的时候它是一个必不可少的参数，可以理解为微软BingMaps为用户开通的一个授权开发密匙，本文试图通过一个简单的示例演练项目来学习BingMaps控件如何使用这个Key来显示地图。
一、创建SilverlightProject
1、在VisualStudio2008SP1中创建SilverlightProject。
创建好的解决方案截图如下：
注意：
解决方案包括了BingMaps以及BingMaps.Web，你必须在运行之前将BingMaps设置为启动项目。
2、在弹出【NewSilverlightApplication】对话框时，必须确保HosttheSilverlightapplicationinanewWebsite选项是勾选的，因为在Silverlight严格控制URL访问，你的Web页面必须通过HTTP规则才能访问BingMap。
二、利用BingMapsSilverlightControl显示地图
1、添加相关引用，具体操作如下：
在BingMaps中选择引用->右击添加引用->浏览->找到BingMapsSilverlightControlSDK的目录下的两个dll文件。
分别为：
Microsoft.Maps.MapControl.Common.dll和Microsoft.Maps.MapControl.dll，讲这两个库文件都引入到上面所建立的Silverlight项目中。
2、修改MainPage.xaml
然后打开MainPage.xaml的源试图，这是就可以通过名称空间将BingMapsSilverlightControl引入到当前Silverlight页面，如下代码示例（注意CredentialsProvider的值就是你之前创建的BingMapKey），同时为了能够显示地图需要添加Map>
Map>节点的内容。
具体代码如下：
[xhtml] viewplaincopy
1. Class="SilverlightApplication1.MainPage"
2. xmlns="
3. xmlns:
x="
4. xmlns:
m="clr-namespace:
Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
5. xmlns:
d="
6. xmlns:
mc="http:
//schemas.openxmlformats.org/markup-compatibility/2006"
7. mc:
Ignorable="d" d:
DesignWidth="640" d:
DesignHeight="480">
8.
9. Name="LayoutRoot">
10. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1"
11. NavigationVisibility="Collapsed"
12. Width="500"
13. Height="500">
14.
Map>
15.
16.
在地图控件（Map）中的CredentialsProvider就是之前我们通过BingMaps账户管理中心创建的开发所需的Key，通过Width和Height属性值确定地图控件将显示的宽度和高度。
编译启动程序预览就可以发现，
警告信息：
如果你通过以下方式访问页面信息：
file:
///D:
/Codes/SilverlightApplication1/SilverlightApplication1/Bin/Debug/TestPage.html
你的页面将会显示：
MaploadedinunsupportedUrlScheme.Pleasereloadpagein"http"scheme
这条信息就是提示你必须通过Http协议才能正常显示你创建的BingMaps，否则就会出错（所以你的PC最好安装好了IIS，否则直接运行Silverlight项目会提示相关错误信息）。
编译成功后，默认的地图（其他地图的开发在后续blog里会介绍）已经成功的通过BingMapsSilverlightControl呈现出来了，如下图所示：
在显示默认图像的同时，收到了【中联重科】的录用通知，两者都让我很兴奋啊。
我需要冷静一下，等下才写后续的内容了。
冷静回来，继续学习，上面的图片的默认的显示，显然不能满足用户的需要，那么我们如何定制自己需要的图片呢，首先你必须了解相关的属性。
三、其他功能属性说明
1、NavigationVisibility属性
如地图左上方有地图的导航工具栏，我们可以通过Map控件的NavigationVisibility属性设置是否要显示该功能导航。
设置方式如下：
[xhtml] viewplaincopy
1. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1"
2. NavigationVisibility="Collapsed"
3. Width="500"
4. Height="500">
5.
Map>
2、 Mode属性
也可以设置地图的显示模式，有路况模式（Road）、卫星模式（Aerial模式分显示路标和不显示路标两种模式），控件默认加载为路况模式，既Road模式，如下代码：
[xhtml] viewplaincopy
1. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" Name="map"
2. Width="500" Height="500" Mode="Road">
3.
Map>
如果设置Mode为“Aerial”则以卫星模式加载地图，Aerial是无路标的卫星模式，若要显示路标则需要使用“AerialWithLabels”加载地图。
如下代码：
[xhtml] viewplaincopy
1. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" Name="map"
2. Width="500" Height="500" Mode="AerialWithLabels">
3.
Map>
3、其他的属性
我们还可以为路标设置缓慢效果，当鼠标指向路标的时候缓慢显示出路标，离开后缓慢隐藏路标。
代码如下所示：
[xhtml] viewplaincopy
1. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" Name="map"
2. Center="37.806029,-122.407007">
3. Map.Mode>
4. AerialMode Labels="True" FadingLabels="True" />
5.
Map.Mode>
6.
Map>
我们目前只是能够显示地图，然后可以通过一些属性值定制自己的BingMaps项目。
但是我们又面临了新的问题，即我们如何控制地图呢？
下一个章节将会给出具体的答案。
【BingMap学习系列】（3）——如何通过BingMapsSilverlightControl控制地图
上一篇文章最后提出了一个问题：
用户如何通过编程来控制地图？
利用BingMapsSilverlightControl将会很容易办到，本文主要介绍如何对地图的一些常用控制操作，包括地图加载模式、根据精度和纬度定位、变焦程度等。
一、动态设置地图加载模式
在文章《BingMap学习系列】
（2）——如何通过BingMapsSilverlightControl显示地图》中介绍了地图加载模式，可以给地图控件设置一种模式的地图加载模式，呈现数据的时候根据制定的模式加载地图。
其实我们也可以通过程序动态的来改变地图的加载呈现模式，方式和设置模式加载模式是一样的，都是通过地图控件（BingMapsSilverlightControl）的Mode属性来控制。
比如在程序中实现上篇文章中所描述的三种模式地图的显示，在MainPage.xaml.cs文件中可以如下来编写代码实现：
[c-sharp] viewplaincopy
1. private void Road_Click（object sender, RoutedEventArgs e）
2. {
3. this.map.Mode = new RoadMode（）;
4. }
5.
6. private void Aerial_Click（object sender, RoutedEventArgs e）
7. {
8. this.map.Mode = new AerialMode（false）;
9. }
10.
11. private void AerialLabel_Click（object sender, RoutedEventArgs e）
12. {
13. this.map.Mode = new AerialMode（true）;
14. }
通过布局三个按钮分别来实现三种模式的切换，对应的前端Silverlight代码（即MainPage.xaml部分代码）如下：
[c-sharp] viewplaincopy
1. Name="LayoutRoot" Width="500" Height="500">
2. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" x:
Name="map" NavigationVisibility="Collapsed">
3.
Map>
4.
5.
6. 路径模式
7.
8.
9. 卫星模式（无路标）
10.
11.
12. 卫星模式（有路标）
13.
14.
15.
运行后，效果如下图所示：
二、动态定位
可以说所有地图系统（比如常见的GoogleMaps,BingMaps,ArcGIS,MapInfo等）都是通过精度（Longitude）和纬度（Latitude）来进行定位。
在BingMaps开发中，我们也可以做到动态定位，BingMapsSilverlightControl提供了动态定位的相关API我们可以直接调用。
地图的精度和纬度都是通过double类型值表示（经测试BingMaps中设置int,float类型值也可以），在设置精度纬度的时候需要注意，错误的度值会引发Silverlight异常。
精度：
Name="tbLongitude" Text="0.0" TextAlignment="Right">
纬度：
Name="tbLatitude" Text="0.0" TextAlignment="Right">
动态定位
代码如下：
[c-sharp] viewplaincopy
1. private void Dynamic_Click（object sender, RoutedEventArgs e）
2. {
3. double latitude = 0;
4. double longitude = 0;
5.
6. double.TryParse（tbLatitude.Text, out latitude）;
7. double.TryParse（tbLongitude.Text, out longitude）;
8. this.map.SetView（new Location（latitude, longitude）, 5）;
9. }
SetView方法提供了多个重载版本，其中一个重载为通过Location对象使用精度和纬度构造地图坐标以及地图变焦程度参数来进行地图坐标定位。
地图定位的精度和纬度表示的坐标为当前地图显示区域的中心点，可以使用地图控件的"Center"属性，值得到当前显示地图的中心坐标点（精度，纬度）。
代码如下所示：
[c-sharp] viewplaincopy
1. public MainPage（）
2. {
3. InitializeComponent（）;
4. this.map.ViewChangeOnFrame += delegate（object sender, Microsoft.Maps.MapControl.MapEventArgs e）
5. {
6. double longitude = this.map.Center.Longitude;
7. double latitude = this.map.Center.Latitude;
8. };
9. }
三、动态设置变焦程度
地图变焦也可以说是镜头的放大与缩小程度，可以通过对地图控件设置ZoomLevel属性进行动态控制。
变焦的取值是有限的只能取值1---16，如下为地图设置默认的加载变焦级别。
前端Silverlight的代码如下所示：
[xhtml] viewplaincopy
1. Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" x:
Name="map"
2. NavigationVisibility="Collapsed"
3. ZoomLevel="5">
4.
Map>
同时也支持动态设置变焦程度，通过程序动态改变ZoomLevel的值就OK了，如下示例代码：
[c-sharp] viewplaincopy
1. private void ZoomLevel_Click（object sender, RoutedEventArgs e）
2. {
3. double zoomLevel = 1d;
4. double.TryParse（this.tbZoomLevel.Text.Trim（）, out zoomLevel）;
5. this.map.ZoomLevel = zoomLevel;
6. }
运行后效果图如下所示：
【BingMap学习系列】（4）——如何在自己的页面嵌入Silverlight地图
升级会员 