[Silverlight] 當麻許的Phone7筆記 - 17.地圖控制項(Microsoft.Phone.Controls.Maps)

2011/02/08

今天是大年初一祝大家新年快樂 !!

去年我分享了幾篇在Silverlight中關於Map Control 的文章..
其中一些常用的地圖功能,其中包含 路徑規劃地點搜尋加入標記點 ..等
詳情可以參閱 : 當麻許@點部落 Silverlight Map Control
在Windows Phone 7 中 ,其實就跟在Silverlight 中控制Map Control 一樣的溫馨,
而且是內建的Controls,而且大部分的實作方式跟以前都很像只是名稱有些不同…

看一下今天的實作…
blog-16


主要地圖Control 名稱是 myMap
下面三個按鈕
btnGotoHeeyuki - 到嬉遊紀,會在地圖上面標示我們公司的位置並且把Zoom Level 調整到合適的位置

btnChangeAerialMode - 切換衛星模式,將地圖切換成衛星鳥瞰模式

btnChangeRoadMode - 切換地圖模式,地圖預設就是地圖模式,切換至衛星鳥瞰模式後可以切回來

其中放入Map Control 很簡單只需要將ToolBox 拉入即可…

blog-17

這樣地圖就建立完成了…
但是執行的時候會出現這樣的訊息..
blog-15
Invalid Credentials. Sign up for a deverloper account.

別緊張,你只需要到  http://www.bingmapsportal.com/ 即可註冊

註冊一些基本資料後,就可以拿到開發的Key

blog-18


將Key 填入至 地圖元件的 CredentialsProvider 屬性即可

blog-19

這時候XAML Code :


<my:Map Height="391"   HorizontalAlignment="Left" Margin="9,6,0,0" Name="myMap" VerticalAlignment="Top" Width="441" ZoomBarVisibility="Visible" ScaleVisibility="Visible">
               <my:Map.CredentialsProvider>
                   <my:ApplicationIdCredentialsProvider ApplicationId="AhJVhW5NauWtnBJsc2AUOuofd0G6LOhJLmsYZ9GD6WAQyMi0o-8_KqjOXQBzRDye" />
               </my:Map.CredentialsProvider>
</my:Map>

但是其實如果妳會編輯  XAML 可以改成

<my:Map Height="391" CredentialsProvider="AhJVhW5NauWtnBJsc2AUOuofd0G6LOhJLmsYZ9GD6WAQyMi0o-8_KqjOXQBzRDye"  
HorizontalAlignment="Left" Margin="9,6,0,0" Name="myMap" VerticalAlignment="Top" Width="441" 
ZoomBarVisibility="Visible" ScaleVisibility="Visible" />
           

這樣比較好看一點…
其中我把 ZoomBarVisibility 還有 ScaleVisibility 都打開方便可以控制比例尺的檢視…

地圖的元件已經好了…現在來看看如何定位至嬉遊紀…
嬉遊紀在經位度上面為 25.0279845, 121.5683636

所以我們在 btnGotoHeeyuki  的Click Event 加入


private void btnGotoHeeyuki_Click(object sender, RoutedEventArgs e)
{
    var myLayer = new MapLayer();
    //將地圖插入一個MapLayer
    myMap.Children.Add(myLayer);


    Pushpin ppHeeyuki = new Pushpin();
    //在MapLayer加入pin並且標記位置
    myLayer.AddChild(ppHeeyuki, new GeoCoordinate(25.0279845, 121.5683636));

    //將標記位置設成地圖中央
    this.myMap.SetView(new  GeoCoordinate(25.0279845, 121.5683636), 16);
}

其中我不只定位至嬉遊紀的經緯度我還把地圖的ZoomLevel改成16 這樣比較讓使用者好檢視…

預覽結果:
blog-20


切換至衛星模式  btnChangeAerialMode  的Click Event :


private void btnChangeAerialMode_Click(object sender, RoutedEventArgs e)
{
    myMap.Mode = new AerialMode();
}


結果:

blog-21

切回地圖鳥瞰模式(預設)  btnChangeRoadMode  Click Event :

private void btnChangeRoadMode_Click(object sender, RoutedEventArgs e)
{
    myMap.Mode = new RoadMode();
}

blog-22


其實跟以前Silverlight Bing Map Control 很像…

可以實做看看..在手機上面做地圖感覺又是更加的不同…

讚一下:


檔案下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.