[Silverlight] Phone 7中BingMap Control 使用中文台灣地圖(僅供研究教學用)
2012-10-05
之前，有一隻APP出現在其他平台，弄得軒然大波，叫做我愛波波，那時候我就看到有關地圖的部分，其實透過Silverlight 開發Windows Phone 7 中的地圖程式，
非常的簡單，因為在Windows Phone 7 裡面，就已經內建有了BingMap Control ，
所以可以很簡單的做出具有地圖的軟體
只需要將Map Control 拖曳進去就可以很簡單的完成地圖的部分。執行結果如下：
如果中間出現Invalid Credentials sign up for developer account.
可以到 http://www.bingmapsportal.com/ 申請一組Key 那字樣就會消失。
等等，這時候出現一個問題，就是為什麼地圖會是英文的，其實，那是因為目前Bing Map 尚未開放中文的地圖，其實有點可惜，如果能出現中文那該多好，因為在Silverlight 中Map Control 效果做的很棒，不過沒有關係，因為可以透過繼承
Microsoft.Phone.Controls.Maps.TileSource
去置換其顯示圖資來做到，所以我們把那Control 的顯示圖換成Google Map 的，請注意，請注意其使用圖資的條款，如果是商業用途請慎用，首先建立一個GoogleTileSource.cs 檔案其內容如下
public class GoogleMapsRoadTileSource : GoogleMapsTileSourceBase
{
public GoogleMapsRoadTileSource()
: base("http://mt{0}.google.com/vt/lyrs=m@128&hl=en&x={1}&y={2}&z={3}&s=")
{ }
}
public class GoogleMapsAerialTileSource : GoogleMapsTileSourceBase
{
public GoogleMapsAerialTileSource()
: base("http://khm{0}.google.com/kh/v=62&x={1}&y={2}&z={3}&s=")
{ }
}
public class GoogleMapsLabelsTileSource : GoogleMapsTileSourceBase
{
public GoogleMapsLabelsTileSource()
: base("http://mt{0}.google.com/vt/lyrs=h@128&hl=en&x={1}&y={2}&z={3}&s=")
{ }
}
public abstract class GoogleMapsTileSourceBase : Microsoft.Phone.Controls.Maps.TileSource
{
protected GoogleMapsTileSourceBase(string uriFormat)
: base(uriFormat)
{ }
public override System.Uri GetUri(int x, int y, int zoomLevel)
{
return new System.Uri(string.Format(UriFormat, new System.Random().Next() % 4, x, y, zoomLevel));
}
}
之後再XAML 使用Map的時候使用方式如下：
<Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,-51">
<Microsoft_Phone_Controls_Maps:Map x:Name="myMap" d:LayoutOverrides="Width" ScaleVisibility="Visible" CredentialsProvider="AgyuXoy2cMUO2BXbN0agH4EGeFk_vlRESLeypiyD4s2qYljtUstzzaZ0RqK0G_Ye">
<Microsoft_Phone_Controls_Maps:Map.Mode>
<mCore:MercatorMode></mCore:MercatorMode>
</Microsoft_Phone_Controls_Maps:Map.Mode>
<Microsoft_Phone_Controls_Maps:Map.Children>
<Microsoft_Phone_Controls_Maps:MapTileLayer>
<Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
<local:GoogleMapsRoadTileSource></local:GoogleMapsRoadTileSource>
</Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
</Microsoft_Phone_Controls_Maps:MapTileLayer>
</Microsoft_Phone_Controls_Maps:Map.Children>
</Microsoft_Phone_Controls_Maps:Map>
</Grid>
看一下結果：
