|
|
概述
Virtual Earth是什么，我想不用多做解釋了。微軟在推出自己的Virtual Earth之后，開放了大量的APIs，使得我們可以方便集成到自己的應用程序中。
本文將介紹如何在自己的Silverlight 2應用程序中集成Virtual Earth。
在HTML中集成
在開始之前，我們先來簡單看一下如何在HTML中集成Virtual Earth，大家可以去這里查詢相關APIs，我們來看看如何加載默認地圖，如下代碼所示：
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/Javascript" src="http://dev.virtualearth.NET/mapcontrol/mapcontrol.ashx?v=6.1"></script> <script type="text/Javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:480px; height:320px;"></div> </body></html>
其實這段代碼非常簡單的簡單，首先引入Virtual Earth Map控件，并且使用JavaScript來加載地圖。
這是最簡單的一個示例，但是并沒有多大實用價值，下面我們再看一個如何在查找地圖上的特定位置的示例，如下代碼所示：
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/Javascript" src="http://dev.virtualearth.NET/mapcontrol/mapcontrol.ashx?v=6.1"></script> <script type="text/Javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); } function FindLoc() { try { var where = document.getElementById('txtWhere').value; map.Find(null, where); } catch(e) { alert(e.message); } } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:500px; height:300px;"></div> <input id="txtWhere" type="text" name="txtWhere"/> <input id="find" type="button" value="Find" name="find" onclick="FindLoc();"/> </body></html>
其實查找位置也特別簡單，直接調用VEMap對象的Find()方法即可，運行后，查找“Beijing”如下圖所示：
在Silverlight中集成
通過上面的兩個示例，大家看到了，在HTML中加載Virtual Earth都是使用JavaScript來完成，我們知道Silverlight 2應用程序可以很容易的實現與JavaScript的交互，意味著我們可以在Silverlight 2應用程序中通過調用JavaScript代碼來實現集成，這種方式的確是可以的，但如果要編寫非常復雜的Virtual Earth應用，實現起來也是一件不容易的事。
好在有一個開源項目可以幫助我們，使用托管代碼在Silverlight 2中實現Virtual Earth應用。該項目名稱為“Virtual Earth Wrapper for Silverlight”，官方地址：http://www.codeplex.com/views，當前版本是1.1。該項目使用托管代碼來封裝了所有Virtual Earth中的JavaScript應用，使得我們編寫Virtual Earth與Silverlight 2集成應用程序變得非常簡單。下面我們看一個簡單的示例，如何在Silverlight中加載Virtual Earth。
在下載Virtual Earth Wrapper for Silverlight后解壓縮，會看到有兩個程序集和一個JavaScript文件。首先在HTML中引入相關的JS腳本，如下代碼所示：
<head> <script type="text/Javascript" src="http://dev.virtualearth.NET/mapcontrol/mapcontrol.ashx?v=6.1"></script> <script type="text/Javascript" src="views.js"></script></head>
其中views.js在壓縮包里面有，然后添加一個div，用來作為地圖容器：
<div id='mapContainer' style="position:relative; width:500px; height:300px;"></div>
編寫一段腳本，定義一個silverlight變量，該變量在此處雖然沒有做任何事，但它將會在views.js文件中被運用：
<script type="text/Javascript"> var silverlight = null; function pluginLoaded(sender,args) { silverlight = document.getElementById('Silverlight'); }</script>
編寫Silverlight Object，指定onLoad事件，如下代碼所示：
<div id="silverlightControlHost" style="position:absolute; width:300px; height:480px; left:10px; top:320px; z-index:2"><object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" style="width:500px;height:50px;border-width:0;" id="Silverlight"> <param name="onLoad" value="pluginLoaded" /> <param name="source" value="ClientBin/SilverlightIntegrateVirtualEarth.xap"/> <param name="background" value="white" /></object></div>
現在來看Silverlight中的代碼編寫，首先引入ScriptInterop.dll和VIEWS.dll兩個程序集，并引入相關的命名空間。在Page_Loaded事件中加入：
void Page_Loaded(object sender, RoutedEventArgs e){ VEMap map = new VEMap("mapContainer"); HtmlPage.RegisterScriptableObject("SLMAP", map); map.LoadMap();}
代碼非常簡單，創建一個VEMap對象，這里的mapContainer就是我們剛才定義的地圖容器，而SLMAP則是注冊的對象別名，注意這個名稱不能修改，因為在views.js中將會用到。現在運行后可以看到加載的地圖：
現在我們再看一下如何在Silverlight中加入查找位置的功能，代碼非常簡單：
VEMap map;void Page_Loaded(object sender, RoutedEventArgs e){ map = new VEMap("mapContainer"); HtmlPage.RegisterScriptableObject("SLMAP", map); map.LoadMap();}void btnFind_Click(object sender, RoutedEventArgs e){ map.Find(null, this.txtWhere.Text); map.LoadMap();}
效果如下圖所示：
除此之外，我們還可以開發更加復雜的應用，如添加層、實現3D效果等，下面是作者給出的一個示例效果：
可以到這里下載該示例。
總結
本文簡單介紹了如何使用VIEWS項目實現Silverlight 2與Virtual Earth的集成，希望對大家有所幫助。
NET技術：在Silverlight 2應用程序中集成Virtual Earth，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
