【Silverlight】Bing Maps学习系列（四）：使用图钉层（Pushpin layer）及地图图层（MapLayer）

　如果我们需要在Bing Maps中加入一个小图钉标记，该如何实现了？Bing Maps控件已经为我们提供了这个功能，在Microsoft.Maps.MapControl名称空间下提供了实现图钉应用的图钉层Pushpin类， 比如我们可以通过如下的方式来定位一个图订层在地图上的位置：

代码

<!-- <br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--> 1   double  longitude  =   double .Parse( " 47.620574 " );
2   double  latitude  =   double .Parse( " -122.34942 " );
3  
4   Pushpin pushpin  =   new  Pushpin();
5   pushpin.Location  =   new  Location(latitude, longitude);

 

　　从上可以看书，实现定位还是使用的上一篇文章中介绍的Location类。呵呵，多记一遍~~~~那如何加入在地图中了，其实很简单的，Bing Maps地图控件直接提供了图钉层，通过内嵌的方式既可加入图订层，默认使用Bing Maps提供的图形标记。

代码

<!-- <br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--> 1   < m:Map  CredentialsProvider ="AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU"  x:Name ="map"  
2          Center ="33.845881352,105.165628188471"  ZoomLevel ="6.0" >
3        < m:Pushpin  Location ="33.845881352,105.165628188471" ></ m:Pushpin >
4   </ m:Map >

 

　　不错，要在地图上加上一个图钉层就是这么简单，并直接定位于33.845881352,105.165628188471这个坐标之上，知道这个坐标是那里吗？他就在俺们“China”上，不行你可以看看下面的截图：

　　　　　　　　 　　　　

 

　　通过上述我们成功的添加上了一个小图钉层在地图上，除了添加图钉外，我们还可以自定义添加图形、图片、视频等在地图上，要实现添加图形、图片或视频等数据到地图上，需要使用Bing Maps为我们提供的地图图层（MapLayer）来实现，如下：

代码

<!-- <br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--> 1   < m:Map  CredentialsProvider ="AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU"  x:Name ="map"  
2          Center ="33.845881352,105.165628188471"  ZoomLevel ="6.0" >
3        < m:Pushpin  Location ="33.845881352,105.165628188471"  x:Name ="mayPushpin" ></ m:Pushpin >
4        < m:MapLayer  x:Name ="myMapLayer" ></ m:MapLayer >
5   </ m:Map >

 

　　如上在地图中加入了一空白地图图层，接下来就可以使用程序动态在地图图层上添加自己想加的东西了，比如上面我们已经定位到了中国地图区域，接下来我们将中国国旗插上地图可以吗？答案是肯定的，如何做？

代码

<!-- <br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->  1   private void btnAddPushpin_Click(object sender, RoutedEventArgs e)
 2   {
 3       double longitude = double.Parse(this.tbLongitude2.Text.Trim());
 4       double latitude = double.Parse(this.tbLatitude2.Text.Trim());
 5  
 6       Location location = new Location(latitude, longitude);
 7  
 8       Image image = new Image();
 9       image.Source = new BitmapImage(new Uri("http://localhost:2986/Images/China.jpg ", UriKind.RelativeOrAbsolute));
10       image.Stretch = Stretch.None;
11       image.ImageFailed += delegate(object senders, ExceptionRoutedEventArgs ex)
12       { };
13       PositionOrigin position = new PositionOrigin(1.0, 1.0);
14  
15       this.myMapLayer.AddChild(image, location, position);
16   }

 

　　同样通过Location进行坐标的精度和纬度定位，通过将制定的图片序列为Image对象作为一个可显示的对象添加到地图图层就OK了。效果如下：

　　　　　　　　 　　

 

　　OK，成功的在地图上插上了中国国旗！~~~~~Silverlight完整代码如下：

代码

<!-- <br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->  1   < UserControl  x:Class ="PushpinLayer.MainPage"
 2       xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation "  
 3       xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml "
 4       xmlns:m ="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
 5       xmlns:d ="http://schemas.microsoft.com/expression/blend/2008 "  xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006 "  
 6       mc:Ignorable ="d"  d:DesignWidth ="500"  d:DesignHeight ="500" >
 7      < Grid  x:Name ="LayoutRoot"  Width ="500"  Height ="500" >
 8            < m:Map  CredentialsProvider ="AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU"  x:Name ="map"  
 9                  Center ="33.845881352,105.165628188471"  ZoomLevel ="6.0" >
10                < m:Pushpin  Location ="33.845881352,105.165628188471"  x:Name ="mayPushpin" ></ m:Pushpin >
11                < m:MapLayer  x:Name ="myMapLayer" ></ m:MapLayer >
12            </ m:Map >
13            < StackPanel  HorizontalAlignment ="Left"  VerticalAlignment ="Bottom"  Width ="180"  Height ="200"  Background ="Gray" >
14                < TextBlock  Text ="精度：" ></ TextBlock >
15                < TextBox  x:Name ="tbLongitude" ></ TextBox >
16                < TextBlock  Text ="纬度：" ></ TextBlock >
17                < TextBox  x:Name ="tbLatitude" ></ TextBox >
18                < TextBlock  Text =" " ></ TextBlock >
19                < TextBlock  Text ="精度：" ></ TextBlock >
20                < TextBox  x:Name ="tbLongitude2" ></ TextBox >
21                < TextBlock  Text ="纬度：" ></ TextBlock >
22                < TextBox  x:Name ="tbLatitude2" ></ TextBox >
23                < Button  x:Name ="btnAddPushpin"  Click ="btnAddPushpin_Click"  Content ="添加五星红旗" ></ Button >
24            </ StackPanel >
25      </ Grid >
26   </ UserControl >
27  

 

 

　　本篇暂介绍到这里，希望提到抛砖引玉的效果，更详细的内容大家可参考官方提供的开发Silverlight和Bing Maps的朋友前来讨论~~~

 

 

相关说明

 本文属学习笔记文章，愿与有志者共同学习交流。欢迎转载，但请在明显地位标记本文的原文连接。  

作      者：Beniao

文章出处：http://beniao.cnblogs.com/   或  http://www.cnblogs.com/

 

 

 

#1楼 xland        在2009-12-01 08:13说：

"精度"or"经度"?
流汗而去

   回复    引用    查看     

#2楼 [ 楼主 ] Bēniaǒ        在2009-12-01 11:51说：

@ xland
谁能无过？

   回复    引用    查看     

#3楼 真见        在2009-12-01 12:17说：

hohoho

   回复    引用    查看     

#4楼 [ 楼主 ] Bēniaǒ        在2009-12-01 13:27说：

@ 真见
:)

   回复    引用    查看     

#5楼 cokkiy        在2009-12-01 13:41说：

不支持中文地图吗?是不是改一下Url的参数就可以显示中文地图了?

   回复    引用    查看     

#6楼 [ 楼主 ] Bēniaǒ        在2009-12-02 13:32说：

@ cokkiy
在AJAX API中可以的，Silverlight目前还没有可直接设置的方式实现加载中国地图（国语）的。可以通过间接的方式实现，通过自定义图层来覆盖原有的图层，将直定义的图层指向中文Bing Maps的Tile系统。
public MainPage()
{
InitializeComponent();
//初始化一个Uri对象，指向中文必应地图的Tile系统
UriBuilder tileSourceUri = new UriBuilder("http://r2.tiles.ditu.live.com/tiles/r {quadkey}.png?g=41");
MapTileLayer tileLayer = new MapTileLayer(); //初始化一个图层
LocationRectTileSource tileSource = new LocationRectTileSource(
tileSourceUri.Uri.ToString(),
new LocationRect(new Location(60, 60), new Location(13, 140)),
//初始化LocationRectTileSource对象，设定显示范围及放大级别
new Range<double>(1, 16));
tileLayer.TileSources.Add(tileSource); //指定图层的TileSource
tileLayer.Opacity = 0.9;
myMap.Children.Add(tileLayer); //将图层叠加在地图上

this.myMap.ViewChangeOnFrame += delegate(object sender, Microsoft.Maps.MapControl.MapEventArgs e)
{
double longitude = this.myMap.Center.Longitude;
double latitude = this.myMap.Center.Latitude;

this.tbLa.Text = latitude.ToString();
this.tbLo.Text = longitude.ToString();
};
//longitude:106.267710646379
//latitude:36.6078081145336
}

   回复    引用    查看     

#7楼 Kenny1[未注册用户] 在2009-12-03 10:19说：

map.CredentialsProvider = null; //证书不知道怎么加上去

楼主，我申请了一个证书，在xaml里我按你的方法可以成功添加添加证书，也能显示出地图。但在代码里就不会玩儿了，请指教，谢谢!

   回复    引用     

#8楼 [ 楼主 ] Bēniaǒ        在2009-12-03 14:21说：

@ Kenny1
你试试通过ApplicationIdCredentialsProvider设置，我没试过，应该是可以的 。

myMap.CredentialsProvider = new ApplicationIdCredentialsProvider("you key");


ClientTokenCredentialsProvider这个类同ApplicationIdCredentialsProvider一样，也是继承的抽象类CredentialsProvider，应该这两个类都可以完成你的需求。

   回复    引用    查看     

#9楼 Kenny1[未注册用户] 在2009-12-03 18:00说：

你太强了，向你学习！

我刚刚也在Bing Map SDK里看到了
System.Object
Microsoft.Maps.MapControl.Core.CredentialsProvider Microsoft.Maps.MapControl.ApplicationIdCredentialsProvider
Microsoft.Maps.MapControl.ClientTokenCredentialsProvider

   回复    引用     

#10楼 Kenny1[未注册用户] 在2009-12-03 18:02说：

楼主，有没有什么办法把Bing Maps Silverlight SDK集成到MSDN里去？

   回复    引用     

#11楼 [ 楼主 ] Bēniaǒ        在2009-12-04 08:46说：

@ Kenny1
没试验过，我对Bing Maps也不是很熟悉，一起学习。
之前我做过google maps，两者相差不是很大。

   回复    引用    查看     

#12楼 Kenny1[未注册用户] 在2009-12-04 16:25说：

马上就周末了，先祝楼主周末出去耍的安逸 :)

我看你上面讲的办法已经可以添加图钉了，问题出现了，如果我猛点添加图钉按钮，就会在某个经纬度上一直叠加图钉，如何控件某个经纬度上只能添加一个图钉？ 谢谢！

   回复    引用     

#13楼 [ 楼主 ] Bēniaǒ        在2009-12-06 21:35说：

@ Kenny1
每个图钉在Silverlight里就是对应一个UIElement，你遍历Map下的所有类型为Pushpin的UIElement，判断是否已经添加来决定是否需要重复添加。