Windows Phone 7 开发 31 日谈——第20日：地图控件

 

第20日。

    昨天的长文是关于如何使用推送通知向你的手机发送数据的，即便程序没有运行。今天，我们重新回到控件，更具体的说，是地图控件。现在地理定位服务在移动应用程序中越来越流行，它的这种能告知用户身处何地以及身边有何物的能力变得越来越重要。

使用地图控件

作为visual studio 2010工具箱的一部分，你只需要将一个地图控件拖到页面中即可。这样做时，你会注意到在页面中添加了另一个xml名称空间。

xmlns:map="clr-namespace:microsoft.phone.controls.maps;assembly=microsoft.phone.controls.maps"

这是在我的例子中默认添加的xaml（在我调整好位置和尺寸后）：

<map:map height="607" horizontalalignment="left" name="mymap" verticalalignment="top" width="456" />

最后，来一张程序中地图的截图：

 

你会注意到在上图*的白色文字写着“无效的证书。注册一个开发人员账户”。本文的剩余部分，我会说一下我们能对这个地图控件进行的所有不同的操作，包括获得一个有效地开发人员api密钥。

创建你的开发人员账户

    在构建你的地图程序之前首先要做的就是获得一个bing map api密钥。这很简单，并且是免费的，并且可以将上面那行丑陋的白字去掉。要得到它，需要前往bing地图站点并注册。完成后，你需要创建一个api密钥。窗体看起来是这样的：

 

当你填好后，他们会给你一个看起来像这样的api密钥：

aswlunhevlghllharqtzlslewv1qidgppxoqyl-7he2jxyhvlajutrcntemuih-w9

（这不是我的api密钥。我替换了很多字符。但它看起来应该像你见到的这样。）

使用credentials provider属性

既然你已经有一个api密钥了，我们需要将它插入到我们的程序中。如果你的程序中只有一个地图控件，向下面这样使用就非常好：

<map:map credentialsprovider="aswlunhevlghllharqtzlslewv1qidgppxoqyl-7he2jxyhvlajutrcntemuih-w9">

    如果你想重用这个值，应该将它保存到别的地方，比如app.xaml文件。像下面这个例子。我提供了你会在app.xaml文件和实际的地图控件中都能用到的代码。我们在app.xaml文件中创建了一个静态的credentialsprovider，并在我们的页面中访问它。

app.xaml

代码

<application.resources>

    <map:applicationidcredentialsprovider applicationid="aswlunhevlghllharqtzlslewv1qidgppxoqyl-7he2jxyhvlajutrcntemuih-w9" x:key="bingmapsapikey"></map:applicationidcredentialsprovider>

</application.resources>

 

map control

<map:map credentialsprovider="{staticresource bingmapsapikey}">

改变地图控件的特性

    有很多选项可以改变地图的外观。例如，将道路模式改为空中模式，或者决定是否显示缩放级别选择器。你有很多很多可以设置的选项，它们都在bing maps silverlight control interactive sdk中。我就不必在这里把所有选项都罗列一遍了（他们已经做了很多工作了），但我要告诉你如何从地图中获取你的数据。重点只讲两件事：在地图中添加图钉和自定义的形状。

在地图中添加图钉

在c#中，添加一个图钉就是创建一个pushpin对象，设置它的位置，然后将它添加到地图中。在xaml中也可以实现。很明显，xaml为你提供了更快捷的方式，但其实哪种方式都不复杂。

xaml

<map:pushpin location="40.1449, -82.9754" fontsize="30" background="orange" content="1" />

c#

代码

pushpin pushpin = new pushpin();

location location = new location();

location.latitude = 40.1449;

location.longitude = -82.9754;

pushpin.location = location;

pushpin.background = new solidcolorbrush(colors.orange);

pushpin.content = "1";

pushpin.fontsize = 30;

mapcontrol.children.add(pushpin);

 

在上面的例子中，无论哪种方式，都会将一个图钉钉到我的办公室，在8800 lyra drive, columbus可以找到。在我的程序中看起来是这样的：

 

如果你想知道如何将你的地址转换为经纬度，请参见我的这篇silverlight 31日谈系列中的文章。它包含了地理地址编码以及你要在手机程序中所做的内容。

在地图中添加自定义xaml

    在map程序集中有一个小控件叫mappolygon。向它提供一系列位置，它就会在你的地图中画出一个自定义的多边形，当用户缩放和移动地图时它仍会固定在那个位置。由于它是基于经纬度而绑定到地图的，所以程序中有需要，可以很容易地用它勾勒出国家，州，地区，甚至一个停车场的轮廓。下面是实现方法：

xaml

<map:mappolygon fill="purple" stroke="white" opacity=".7" locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />

c#

代码

mappolygon mappolygon = new mappolygon();

mappolygon.fill = new solidcolorbrush(colors.purple);

mappolygon.stroke = new solidcolorbrush(colors.white);

mappolygon.opacity = .7;

locationcollection locations = new locationcollection();

location location = new location();

location.latitude = 40.1449;

location.longitude = -82.9754;

location location1 = new location();

location1.latitude = 40.1449;

location1.longitude = -12.9754;

location location2 = new location();

location1.latitude = 10.1449;

location1.longitude = -82.9754;

locations.add(location);

locations.add(location1);

locations.add(location2);

mappolygon.locations = locations;

mapcontrol.children.add(mappolygon);

就是这些。我们已经将一个图钉和一个自定义多边形覆盖到了地图中。关于这个控件的更多功能请参见bing maps silverlight control interactive sdk（下面是mappolygon的截图）

下载示例代码

在这个例子中，你可以找到用xaml和c#将图钉和多边形添加到地图中的例子。可能你不需要全部内容，可以取其一，这完全由你决定。

 

原文地址：http://www.jeffblankenburg.com/post/31-days-of-windows-phone-7c-day-20-map-control.x