在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均可)
![未命名2 未命名2](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/73598a8975db4a699b9abfc07ab32f39.jpeg?x-oss-process=image/resize,w_1400/format,webp)
第二步:添加对Microsoft.VirtualEarth.MapControl.dll的引用。
Microsoft.VirtualEarth.MapControl.dll位于Virtual Earth Silverlight Map Control (CTP) SDK安装路径内。
![未命名3 未命名3](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/6dbb21f9f2684864a99e0255b6b7b626.jpeg?x-oss-process=image/resize,w_1400/format,webp)
第三步:在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"
/>
<
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
>
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/679e085e93ab4c60bebc5519c0d86f1e.gif)
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/679e085e93ab4c60bebc5519c0d86f1e.gif)
</
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;
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/679e085e93ab4c60bebc5519c0d86f1e.gif)
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/679e085e93ab4c60bebc5519c0d86f1e.gif)
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();
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/12960c69fb244989948490f5b3cbed8a.gif)
public MainPage()
{
InitializeComponent();
viewMap.AddChild(imageLayer);
viewMap.ViewChangeOnFrame += new EventHandler<MapEventArgs>(viewMap_ViewChangeOnFrame);
viewMap.AnimationLevel = AnimationLevel.Full;
}
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/12960c69fb244989948490f5b3cbed8a.gif)
private void viewMap_ViewChangeOnFrame(object sender, MapEventArgs e)
{
Map map = sender as Map;
if (map != null)
{
MapViewSpecification mapViewSpec = map.View;
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/12960c69fb244989948490f5b3cbed8a.gif)
// 根据地图当前的状态动态改变txtLatitude和txtLongitude的值
txtLatitude.Text = string.Format(CultureInfo.InvariantCulture,
"{0:F5}", mapViewSpec.Center.Latitude);
txtLongitude.Text = string.Format(CultureInfo.InvariantCulture,
"{0:F5}", mapViewSpec.Center.Longitude);
}
}
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/12960c69fb244989948490f5b3cbed8a.gif)
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);
}
![](https://ucc.alicdn.com/grng7az2sxifq/developer-article570835/20241020/12960c69fb244989948490f5b3cbed8a.gif)
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一样,只是一个控制非常方便的控件了。 : )
本文转自 流牛木马 博客园博客,原文链接:http://www.cnblogs.com/azure/archive/2009/03/29/1424408.html,如需转载请自行联系原作者