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

Hello,Map

最简单的地图应用莫过于只是显地图。这种快速的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中添加地图命名空间:

xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

4. 在<Grid>域中增加地图元素，如下所示：

    <Grid x:Name="LayoutRoot">
        <m:Map CredentialsProvider="Your Bing Maps Key"/>
   </Grid>

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



精确控制地图显示

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


首先了解一下Map对象的属性，我们可以为Map对象增加几个属性来帮助我们初始化地图：

 
<m:Map ZoomLevel="14" Mode="AerialWithLabels" Center="39.9,116.4" CredentialsProvider="Your Bing Maps Key"></m:Map>

简单说明如下：

• ZoomLevel：地图放大级数
• Mode：地图模式，此处设为AerialWithLabels，即显示带路标的卫星地图
• Center：初始显示的地图中心经纬度

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

Microsoft还在为Bing Map提供其他有意思的模式，比如鸟瞰模式，详细另文说明。

<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>

关于Map对象的成员、属性及方法的详细描述，你可以参考
MSDN。

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

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

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

一些常见的地图操作

输入经纬度动态定位：

this.myMap.SetView(new Location(latitude, longitude), 5);

获得当前地图中心的经纬度

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

设置地图放大级数

this.myMap.ZoomLevel = 10;

事件

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

首先为坐标显示控件设计一个外观效果，使用Border布局，并设置了其水平靠右，垂直靠底对齐，你可以调整一下位置，让它看起来更美观些：

        <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>

我们使用了一个名为Coords的TextBlock控件来显示当前鼠标指针所在的地理坐标，通过Map对象的MouseMove事件来实现坐标的显示：

        <m:Map ZoomLevel="14"  Name="myMap" Center="39.9,116.4" ... MouseMove="OnMouseMove">
....
        </m:Map>

响应的C#代码如下：

        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);
            }
        }

最后效果:



当然，地图事件还有很多，例如鼠标双击事件、鼠标滚轮事件、键盘事件等等。详情参见 MSDN中的描述，基本原理都是一样的。