当前位置: 代码迷 >> 综合 >> 【二】Bing Maps Silverlight 控件 之 快速上手
  详细解决方案

【二】Bing Maps Silverlight 控件 之 快速上手

热度:89   发布时间:2023-12-10 05:12:28.0
[b]Hello,Map[/b]

最简单的地图应用莫过于只是显地图。这种快速的BingMap开发,使用SilverLight控件简直是小菜一碟。

1.打开VS2010,创建SilverLight Project。

2. 添加Bing Maps Silverlight Control Reference,通常在必应地图SilverLight地图控件安装目录下,例如:C:\Program Files\Bing Maps Silverlight Control\V1\Libraries

3. 在MainPage.xaml中添加地图命名空间:
[code]
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
[/code]
4. 在<Grid>域中增加地图元素,如下所示:
[code]
<Grid x:Name="LayoutRoot">
<m:Map CredentialsProvider="Your Bing Maps Key"/>
</Grid>
[/code]

这里填入我们上面申请的Bing Maps Key,不填写的话,地图上会有一行提示,影响。现在大功告成,可以显示地图了,编译运行一下吧!

[img]http://dl.iteye.com/upload/attachment/261292/a098ddab-b9ee-39de-9a45-c03d04109924.png[/img]

[b]精确控制地图显示[/b]

通常一个地图应用,都需要进行诸如设置地图中心、放大级数、显示卫星地图等等的精确控制。在Bing Maps 控件里,我们可以通过在XMAL设置属性来进行控制,也可以在C#代码中进行动态的控制。


首先了解一下Map对象的属性,我们可以为Map对象增加几个属性来帮助我们初始化地图:
[code]
<m:Map ZoomLevel="14" Mode="AerialWithLabels" Center="39.9,116.4" CredentialsProvider="Your Bing Maps Key"></m:Map>
[/code]

简单说明如下:
[list]
[*]ZoomLevel:地图放大级数
[*]Mode:地图模式,此处设为AerialWithLabels,即显示带路标的卫星地图
[*]Center:初始显示的地图中心经纬度
[/list]

BingMap提供了路况模式(Road)、卫星模式(Aerial模式分显示路标和不显示路标两种模式),控件默认加载为路况模式,既Road模式。我们还可以为路标设置渐变效果,当鼠标指向路标的时候缓慢显示出路标,离开后缓慢隐藏路标。

Microsoft还在为Bing Map提供其他有意思的模式,比如鸟瞰模式,详细另文说明。
[code]
<m:Map CredentialsProvider="Your Bing Maps Key" Name="myMap"
Center="39.9,116.4">
<m:Map.Mode>
<m:AerialMode Labels="True" FadingLabels="True" />
</m:Map.Mode>
</m:Map>
[/code]

关于Map对象的成员、属性及方法的详细描述,你可以参考
[url="http://msdn.microsoft.com/en-us/library/microsoft.maps.mapcontrol.map_members.aspx"]MSDN[/url]。

为了提供更动态的效果,大部分程序员喜欢用C#或者VB.NET来控制地图,首先我们需要为Map对象,设置一个Name属性,比如"myMap",这样可以很方便的访问Map对象,然后就可以如此初始化地图:

[code]
myMap.Center = new Location(39.9,116.4);
myMap.Mode = new AerialMode();
myMap.ZoomLevel = 14;
[/code]

这样就得到了和之前一模一样的效果。

[b]一些常见的地图操作[/b]

输入经纬度动态定位:
[code]
this.myMap.SetView(new Location(latitude, longitude), 5);
[/code]

获得当前地图中心的经纬度
[code]
this.myMap.ViewChangeOnFrame += delegate(object sender, Microsoft.Maps.MapControl.MapEventArgs e)
{
double longitude = this.myMap.Center.Longitude;
double latitude = this.myMap.Center.Latitude;
};
[/code]

设置地图放大级数
[code]
this.myMap.ZoomLevel = 10;
[/code]

[b]事件[/b]

地图事件在地图应用开发中也会经常遇见,例如在地图上点击鼠标弹出一个窗口,通过键盘添加标记等等。这里我们添加一个小例子,显示当前鼠标所在的地理位置(经度、纬度)。

首先为坐标显示控件设计一个外观效果,使用Border布局,并设置了其水平靠右,垂直靠底对齐,你可以调整一下位置,让它看起来更美观些:
[code]
<Border Background="#FF000000" CornerRadius="8,8,8,8" Padding="0,8,0,8" Opacity="0.68" MinWidth="190" MinHeight="30"
HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,420,5,0">

<TextBlock x:Name="Coords" HorizontalAlignment="Center" TextWrapping="Wrap" Foreground="White"/>
</Border>
[/code]

我们使用了一个名为Coords的TextBlock控件来显示当前鼠标指针所在的地理坐标,通过Map对象的MouseMove事件来实现坐标的显示:
[code]
<m:Map ZoomLevel="14" Name="myMap" Center="39.9,116.4" ... MouseMove="OnMouseMove">
....
</m:Map>
[/code]

响应的C#代码如下:
[code]
private void OnMouseMove(object sender, MouseEventArgs e)
{
Point viewportPoint = e.GetPosition(this.myMap);
Location location;
if (this.myMap.TryViewportPointToLocation(viewportPoint, out location))
{
Coords.Text = String.Format("坐标: {0:f6},{1:f6}", location.Longitude, location.Latitude);
}
}
[/code]
最后效果:

[img]http://dl.iteye.com/upload/attachment/261442/fa850214-cfca-3889-baac-4613105deddf.png[/img]

当然,地图事件还有很多,例如鼠标双击事件、鼠标滚轮事件、键盘事件等等。详情参见[url="http://msdn.microsoft.com/en-us/library/microsoft.maps.mapcontrol.map_events.aspx"]MSDN[/url]中的描述,基本原理都是一样的。
  相关解决方案