Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手-优快云博客

在MIX08上，Chris Pendlenton演示了一款Silverlight地图控件，给大家留下了深刻的印象。时隔一年，在MIX09上，微软终于发布了这款名叫“Virtual Earth Silverlight Map Control”的Silverlight控件技术预览版。

Virtual Earth Silverlight Map Control将Virtual Earth融入了Silverlight，使开发者不必再去使用大量麻烦的Javascript API来开发Virtual Earth应用了。除此之外，它还具有以下优点：

- 对数据和地图进行动画开发；
- 可缩放的界面，包括将来的移动版；
- 深入整合视频、音频和图像，不仅仅是弹出层；
- 支持自定义主题的地图控件；
- 跨浏览器支持，不再需要考虑 CSS Hack 和跨浏览器的 JavaScript 问题。

这个控件的应用非常简单。下面我们就打开Visual Studio 2008,随便试试吧！

效果图：（围观链接：http://azuredrive.blob.core.windows.net/netdrive1/file_e31368a2-988b-4429-b75b-2eb865185c76.html 注：该控件是同时支持Silverlight 2.0和3.0的，但本例中我使用了3.0）

第一步：打开VS2008，新建Silverlight项目。(2.0与3.0的Silverlight Tools均可)

第二步：添加对Microsoft.VirtualEarth.MapControl.dll的引用。

Microsoft.VirtualEarth.MapControl.dll位于Virtual Earth Silverlight Map Control (CTP) SDK安装路径内。

第三步：在Silverlight的MainPage.xaml(2.0中是Page.xaml)中插入地图控件。

< UserControl x:Class ="SilverlightApplication1.Page"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m ="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl" >
    < Grid x:Name ="LayoutRoot" Background ="White" >
        < m:Map />
    </ Grid >
</ UserControl >

如果你F5运行它的话，你已经可以看到Virtual Earth地图呈现在你的Silverlight项目里了。我们还要做更多。

第四步：拖入一些简单的控件。

< UserControl x:Class ="SLLiveEarthControl.MainPage"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

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

Width ="700" Height ="500" >

< Grid x:Name ="LayoutRoot" Background ="White" >

< Grid.RowDefinitions >

< RowDefinition Height ="*" />

< RowDefinition Height ="40" />

</ Grid.RowDefinitions >

< VirtualEarth:Map x:Name ="viewMap" Mode ="AerialWithLabels" Grid.Column ="0" Grid.Row ="0" Grid.RowSpan ="3" Padding ="5"

View ="29.544,106.518,0.0000 14.0000 0.0000" MouseDoubleClick ="MapWithImages_MouseDoubleClick" />

< StackPanel Orientation ="Horizontal" Opacity ="0.7" Grid.Column ="0" Grid.Row ="1" HorizontalAlignment ="Center" >

< Button x:Name ="btnNorthAmerica" Click ="ChangeMapView_Click" Tag ="39.89341,116.33235,0.0000 14.0000 0.0000"

Margin ="5" Height ="20" >

< TextBlock > 北京 </ TextBlock >

</ Button >

< Button x:Name ="btnChengdu" Click ="ChangeMapView_Click" Tag ="30.67,104.074,0.0000 14.0000 0.0000" Margin ="5" Height ="20" >

< TextBlock > 成都 </ TextBlock >

</ Button >

< Button x:Name ="btnShanghai" Click ="ChangeMapView_Click" Tag ="31.10,121.411,0.0000 13.0000 0.0000" Margin ="5" Height ="20" >

< TextBlock > 上海 </ TextBlock >

</ Button >

< Button x:Name ="btnVancouver" Click ="ChangeMapView_Click" Tag ="29.544,106.518,0.0000 14.0000 0.0000" Margin ="5" Height ="20" >

< TextBlock > 重庆 </ TextBlock >

</ Button >

</ StackPanel >

< StackPanel Orientation ="Horizontal" Opacity ="0.9" Grid.Column ="0" Grid.Row ="2" HorizontalAlignment ="Center" >

< TextBlock Text ="双击地图可以添加图钉。更改经纬度后可点击Fly to换位置. " Padding ="5" Foreground ="Red" Width ="178" TextWrapping ="Wrap" />

< TextBlock Text ="Latitude: " Padding ="12" Foreground ="Red" />

< TextBox x:Name ="txtLatitude" Text ="" Height ="20" />

< TextBlock Text ="Longitude: " Padding ="12" Foreground ="Red" />

< TextBox x:Name ="txtLongitude" Text ="" Height ="20" />

< Button x:Name ="btnFlyto" Click ="btnFlyto_Click" Foreground ="Red" Margin ="5" Height ="20" >

< TextBlock > Fly to </ TextBlock >

</ Button >

</ StackPanel >

</ Grid >

</ UserControl >

第五步：写后台代码。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using Microsoft.VirtualEarth.MapControl;
using Microsoft.VirtualEarth.MapControl.Design;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace SLLiveEarthControl
{
    public partial class MainPage : UserControl
    {
         LocationConverter locConverter = new LocationConverter();
        // Converts the Button's location Tag to a map view..
        MapViewSpecificationConverter viewConverter = new MapViewSpecificationConverter();
        private MapLayer imageLayer = new MapLayer();

        public   MainPage()
        {
            InitializeComponent();
            viewMap.AddChild(imageLayer);
            viewMap.ViewChangeOnFrame += new EventHandler<MapEventArgs>(viewMap_ViewChangeOnFrame);
            viewMap.AnimationLevel = AnimationLevel.Full;
        }

        private void viewMap_ViewChangeOnFrame(object sender, MapEventArgs e)
        {
            Map map = sender as Map;
            if (map != null)
            {
                MapViewSpecification mapViewSpec = map.View;

                // 根据地图当前的状态动态改变txtLatitude和txtLongitude的值
                txtLatitude.Text = string.Format(CultureInfo.InvariantCulture,
                    "{0:F5}", mapViewSpec.Center.Latitude);
                txtLongitude.Text = string.Format(CultureInfo.InvariantCulture,
                    "{0:F5}", mapViewSpec.Center.Longitude);
            }
        }

        private void ChangeMapView_Click(object sender, RoutedEventArgs e)
        {
            viewMap.View = (MapViewSpecification)viewConverter.ConvertFrom(((Button)sender).Tag);
        }
        private void MapWithImages_MouseDoubleClick(object sender, MapMouseEventArgs e)
        {
            e.Handled = true;
            Location pinLocation = viewMap.ViewportPointToLocation(e.ViewportPoint);
            Image pin = new Image();
            Random r = new Random();
            pin.Source = new BitmapImage(new Uri(r.Next() % 2==0 ? "female.png" : "male.png", UriKind.RelativeOrAbsolute));
            pin.Stretch = Stretch.None;
            imageLayer.AddChild(pin, pinLocation, PositionMethod.BottomCenter);
        }

        private void btnFlyto_Click(object sender, RoutedEventArgs e)
        {
            viewMap.View = new MapViewSpecification(new Location(Double.Parse(txtLatitude.Text), Double.Parse(txtLongitude.Text)), 14);
        }
    }
}

你可能已经注意到，我们在编程时已经完全脱离了Javascript；Virtual Earth在我们的手中，已经变得和TextBox,DataGrid一样，只是一个控制非常方便的控件了。 : )

__________________________________

附件：

本例代码下载：SLLiveEarthControl.rar