Windows Phone 7 開發 31 日談——第20日：地圖控制項

本文是“Windows Phone 7 開發 31 日談”系列的第20日。

    昨天的長文是關於如何使用推播通知向你的手機發送資料的，即便程式沒有運行。今天，我們重新回到控制項，更具體的說，是地圖控制項。現在地理定位服務在行動裝置 App程式中越來越流行，它的這種能告知使用者身處何地以及身邊有何物的能力變得越來越重要。

使用地圖控制項

作為Visual Studio 2010工具箱的一部分，你只需要將一個地圖控制項拖到頁面中即可。這樣做時，你會注意到在頁面中添加了另一個XML名稱空間。

xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"

這是在我的例子中預設添加的XAML（在我調整好位置和尺寸後）：

<map:Map Height="607" HorizontalAlignment="Left" Name="myMap" VerticalAlignment="Top" Width="456" />

最後，來一張程式中地圖的：

你會注意到在中央的白色文字寫著“無效的認證。註冊一個開發人員賬戶”。本文的剩餘部分，我會說一下我們能對這個地圖控制項進行的所有不同的操作，包括獲得一個有效地開發人員API密鑰。

建立你的開發人員賬戶

    在構建你的地圖程式之前首先要做的就是獲得一個Bing Map API密鑰。這很簡單，並且是免費的，並且可以將上面那行醜陋的白字去掉。要得到它，需要前往Bing地圖網站並註冊。完成後，你需要建立一個API密鑰。表單看起來是這樣的：

當你填好後，他們會給你一個看起來像這樣的API密鑰：

AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9

（這不是我的API密鑰。我替換了很多字元。但它看起來應該像你見到的這樣。）

使用Credentials Provider屬性

既然你已經有一個API密鑰了，我們需要將它插入到我們的程式中。如果你的程式中只有一個地圖控制項，向下面這樣使用就非常好：

<map:Map CredentialsProvider="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9"> 

    如果你想重用這個值，應該將它儲存到別的地方，比如App.xaml檔案。像下面這個例子。我提供了你會在App.xaml檔案和實際的地圖控制項中都能用到的代碼。我們在App.xaml檔案中建立了一個靜態CredentialsProvider，並在我們的頁面中訪問它。

App.xaml

代碼<Application.Resources>
    <map:ApplicationIdCredentialsProvider ApplicationId="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9" x:Key="BingMapsAPIKey"></map:ApplicationIdCredentialsProvider>
</Application.Resources>

Map Control<map:Map CredentialsProvider="{StaticResource BingMapsAPIKey}">

改變地圖控制項的特性

    有很多選項可以改變地圖的外觀。例如，將道路模式改為空白中模式，或者決定是否顯示縮放層級選取器。你有很多很多可以設定的選項，它們都在Bing Maps Silverlight Control Interactive SDK中。我就不必在這裡把所有選項都羅列一遍了（他們已經做了很多工作了），但我要告訴你如何從地圖中擷取你的資料。重點只講兩件事：在地圖中添加圖釘和自訂的形狀。

在地圖中添加圖釘

在C#中，添加一個圖釘就是建立一個Pushpin對象，設定它的位置，然後將它添加到地圖中。在XAML中也可以實現。很明顯，XAML為你提供了更快捷的方式，但其實哪種方式都不複雜。

XAML

<map:Pushpin Location="40.1449, -82.9754" FontSize="30" Background="Orange" Content="1" />

C#

代碼Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Orange);
pushpin.Content = "1";
pushpin.FontSize = 30;
MapControl.Children.Add(pushpin);

在上面的例子中，無論哪種方式，都會將一個圖DingTalk到我的辦公室，在8800 Lyra Drive, Columbus可以找到。在我的程式中看起來是這樣的：

如果你想知道如何將你的地址轉換為經緯度，請參見我的這篇Silverlight 31日談系列中的文章。它包含了地理地址編碼以及你要在手機程式中所做的內容。

在地圖中添加自訂XAML

    在Map程式集中有一個小控制項叫MapPolygon。向它提供一系列位置，它就會在你的地圖中畫出一個自訂的多邊形，當使用者縮放和移動地圖時它仍會固定在那個位置。由於它是基於經緯度而綁定到地圖的，所以程式中有需要，可以很容易地用它勾勒出國家，州，地區，甚至一個停車場的輪廓。下面是實現方法：

XAML

<map:MapPolygon Fill="Purple" Stroke="White" Opacity=".7" Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />

C#

代碼MapPolygon mapPolygon = new MapPolygon();
mapPolygon.Fill = new SolidColorBrush(Colors.Purple);
mapPolygon.Stroke = new SolidColorBrush(Colors.White);
mapPolygon.Opacity = .7;
LocationCollection locations = new LocationCollection();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
Location location1 = new Location();
location1.Latitude = 40.1449;
location1.Longitude = -12.9754;
Location location2 = new Location();
location1.Latitude = 10.1449;
location1.Longitude = -82.9754;
locations.Add(location);
locations.Add(location1);
locations.Add(location2);
mapPolygon.Locations = locations;
MapControl.Children.Add(mapPolygon);

就是這些。我們已經將一個圖釘和一個自訂多邊形覆蓋到了地圖中。關於這個控制項的更多功能請參見Bing Maps Silverlight Control Interactive SDK（下面是MapPolygon的）

下載範例程式碼

在這個例子中，你可以找到用XAML和C#將圖釘和多邊形添加到地圖中的例子。可能你不需要全部內容，可以取其一，這完全由你決定。

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-20-Map-Control.aspx

如果大家喜歡我的文章，請點擊“推薦”，謝謝！