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

l_serein發表於2012-11-06
Windows地圖控制元件

By Jeff Blankenburg

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

 

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

使用地圖控制元件

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

[xhtml] view plaincopy
  1. xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"  

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

[xhtml] view plaincopy
  1. <map:Map Height="607" HorizontalAlignment="Left" Name="myMap" VerticalAlignment="Top" Width="456" />  

 

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

clip_image001

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

建立你的開發人員賬戶

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

clip_image003

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

AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9

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

使用Credentials Provider屬性

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

[xhtml] view plaincopy
  1. <map:Map CredentialsProvider="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9">  

 

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

App.xaml

[xhtml] view plaincopy
  1. <Application.Resources>  
  2.     <map:ApplicationIdCredentialsProvider ApplicationId="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9" x:Key="BingMapsAPIKey"></map:ApplicationIdCredentialsProvider>  
  3. </Application.Resources>  

 

 

 

Map Control

[xhtml] view plaincopy
  1. <map:Map CredentialsProvider="{StaticResource BingMapsAPIKey}">  

 

改變地圖控制元件的特性

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

在地圖中新增圖釘

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

XAML

[xhtml] view plaincopy
  1. <map:Pushpin Location="40.1449, -82.9754" FontSize="30" Background="Orange" Content="1" />  

 

C#

[c-sharp] view plaincopy
  1. Pushpin pushpin = new Pushpin();  
  2. Location location = new Location();  
  3. location.Latitude = 40.1449;  
  4. location.Longitude = -82.9754;  
  5. pushpin.Location = location;  
  6. pushpin.Background = new SolidColorBrush(Colors.Orange);  
  7. pushpin.Content = "1";  
  8. pushpin.FontSize = 30;  
  9. MapControl.Children.Add(pushpin);  

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

clip_image004

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

在地圖中新增自定義XAML

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

XAML

[xhtml] view plaincopy
  1. <map:MapPolygon Fill="Purple" Stroke="White" Opacity=".7" Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />  

 

C#

[c-sharp] view plaincopy
  1. MapPolygon mapPolygon = new MapPolygon();  
  2. mapPolygon.Fill = new SolidColorBrush(Colors.Purple);  
  3. mapPolygon.Stroke = new SolidColorBrush(Colors.White);  
  4. mapPolygon.Opacity = .7;  
  5. LocationCollection locations = new LocationCollection();  
  6. Location location = new Location();  
  7. location.Latitude = 40.1449;  
  8. location.Longitude = -82.9754;  
  9. Location location1 = new Location();  
  10. location1.Latitude = 40.1449;  
  11. location1.Longitude = -12.9754;  
  12. Location location2 = new Location();  
  13. location1.Latitude = 10.1449;  
  14. location1.Longitude = -82.9754;  
  15. locations.Add(location);  
  16. locations.Add(location1);  
  17. locations.Add(location2);  
  18. mapPolygon.Locations = locations;  
  19. MapControl.Children.Add(mapPolygon);  

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

clip_image005

下載示例程式碼

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

clip_image007

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

相關文章