【Bing Map學習系列】(2)——如何通過Bing Maps Silverlight Control顯示地圖

文章目錄

• 一、建立Silverlight Project
• 二、利用Bing Maps Silverlight Control顯示地圖
• 三、其他功能屬性說明

前一篇文章《【Bing Map學習系列】(1)——開發前的準備工作》http://blog.csdn.net/rocket5725/archive/2010/01/14/5188687.aspx介紹了如何搭建Bing Map的開發環境，以及一些準備工作，包括下載相關軟體、準備Bing Map Key。

感謝原創作者：http://www.cnblogs.com/beniao/archive/2009/11/24/1608284.html

這個Key是用來做什麼的呢？Silverlight控制項在做地圖呈現的時候它是一個必不可少的參數，可以理解為微軟Bing Maps為使用者開通的一個授權開發密匙，本文試圖通過一個簡單的樣本演練項目來學習Bing Maps控制項如何使用這個Key來顯示地圖。

一、建立Silverlight Project

1、在Visual Studio 2008 SP1中建立Silverlight Project。建立好的解決方案如下：

注意：方案套件括了BingMaps以及BingMaps.Web，你必須在運行之前將BingMaps設定為啟動項目。

2、在彈出【New Silverlight Application】對話方塊時，必須確保Host the Silverlight application in a new Web site選項是勾選的，因為在Silverlight嚴格控制URL訪問，你的Web頁面必須通過HTTP規則才能訪問Bing Map。

二、利用Bing Maps Silverlight Control顯示地圖

1、添加相關引用，具體操作如下：

在BingMaps中選擇引用->右擊添加引用->瀏覽->找到Bing Maps Silverlight Control SDK的目錄下的兩個dll檔案。分別為：Microsoft.Maps.MapControl.Common.dll和Microsoft.Maps.MapControl.dll，講這兩個庫檔案都引入到上面所建立的Silverlight項目中。

2、修改MainPage.xaml

然後開啟MainPage.xaml的源試圖，這是就可以通過名稱空間將Bing Maps Silverlight Control引入到當前Silverlight頁面，如下程式碼範例(注意CredentialsProvider的值就是你之前建立的Bing Map Key)，同時為了能夠顯示地圖需要添加<m:Map></m:Map>節點的內容。具體代碼如下：

<UserControl x:Class="SilverlightApplication1.MainPage"<br /> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br /> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<br /> xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"<br /> xmlns:d="http://schemas.microsoft.com/expression/blend/2008"<br /> xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"<br /> mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"></p><p> <Grid x:Name="LayoutRoot"><br /> <m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1"<br /> NavigationVisibility="Collapsed"<br /> Width="500"<br /> Height="500"><br /> </m:Map><br /> </Grid><br /></UserControl></p><p>

在地圖控制項（Map）中的CredentialsProvider就是之前我們通過Bing Maps賬戶管理中心建立的開發所需的Key，通過Width和Height屬性值確定地圖控制項將顯示的寬度和高度。編譯啟動程式預覽就可以發現，

警告資訊：如果你通過以下方式訪問頁面資訊：

file:///D:/Codes/SilverlightApplication1/SilverlightApplication1/Bin/Debug/TestPage.html

你的頁面將會顯示：Map loaded in unsupported Url Scheme.Please reload page in "http" scheme

這條資訊就是提示你必須通過Http協議才能正常顯示你建立的Bing Maps，否則就會出錯(所以你的PC最好安裝好了IIS，否則直接運行Silverlight項目會提示相關錯誤資訊)。

編譯成功後，預設的地圖（其他地圖的開發在後續blog裡會介紹）已經成功的通過Bing Maps Silverlight Control呈現出來了，如所示：

在顯示預設映像的同時，收到了【中聯重科】的錄用通知，兩者都讓我很興奮啊。我需要冷靜一下，等下才寫後續的內容了。

冷靜回來，繼續學習，上面的圖片的預設的顯示，顯然不能滿足使用者的需要，那麼我們如何定製自己需要的圖片呢，首先你必須瞭解相關的屬性。

三、其他功能屬性說明

1、NavigationVisibility屬性

如地圖左上方有地圖的導航工具列，我們可以通過Map控制項的NavigationVisibility屬性設定是否要顯示該功能導航。設定方式如下：

<m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1"<br /> NavigationVisibility="Collapsed"<br /> Width="500"<br /> Height="500"><br /></m:Map>

2、 Mode屬性

也可以設定地圖的顯示模式，有路況模式（Road）、衛星模式(Aerial模式分顯示路標和不顯示路標兩種模式)，控制項預設載入為路況模式，既Road模式，如下代碼：
<m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" Name="map"<br /> Width="500" Height="500" Mode="Road"><br /></m:Map>

如果設定Mode為“Aerial”則以衛星模式載入地圖，Aerial是無路標的衛星模式，若要顯示路標則需要使用“AerialWithLabels”載入地圖。如下代碼：

<m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" Name="map"<br /> Width="500" Height="500" Mode="AerialWithLabels"><br /></m:Map>

3、其他的屬性

我們還可以為路標設定緩慢效果，當滑鼠指向路標的時候緩慢顯示出路標，離開後緩慢隱藏路標。代碼如下所示：

<m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" Name="map"<br /> Center="37.806029,-122.407007"><br /> <m:Map.Mode><br /> <m:AerialMode Labels="True" FadingLabels="True" /><br /> </m:Map.Mode><br /></m:Map>

我們目前只是能夠顯示地圖，然後可以通過一些屬性值定製自己的Bing Maps項目。但是我們又面臨了新的問題，即我們如何控制地圖呢？下一個章節將會給出具體的答案。