Windows Phone 8 Nokia地圖控制項升級到WP8必需知道的13個特性

相信大家知道 Windows phone 8 裝置家族中非常耀眼的一款是 Nokia Lumia 920 但是有一點同學們未必知道知道 Nokia除了是老牌手機硬體廠商之外，Nokia的地圖服務也是非常牛氣的。 目前雅虎等網站已經完全採用Nokia地圖庫，而且windows phone 中的bing地圖也在移植Nokia 地圖庫， windows phone 8 中已經原生整合Nokia 地圖控制項，那麼今天我給大家介紹一下 windows phone 8 中的Nokia地圖控制項。

此文是 升級到WP8必需知道的13個特性 系列的一個更新 希望這個系列可以給 Windows Phone 8開發人員帶來一些開發上的便利。

同時歡迎大家在這裡和我溝通交流或者在新浪微博上 @王博_Nick

首先介紹下使用步驟使用Nokia地圖控制項和在WP7中使用BingMap十分相似 這裡我選擇了 location 和 Map 原因是我想在地圖上顯示我的本地位置。

另外每一款Nokia地圖應用都需要 在應用中指定你的 ApplicationID 和 AuthenticationToken這兩項需要在DEV Center中擷取

 

當然在App中是要指定一下的

        private void myMapControl_Loaded(object sender, RoutedEventArgs e)        {            Microsoft.Phone.Maps.MapsSettings.ApplicationContext.ApplicationId = "ApplicationID";            Microsoft.Phone.Maps.MapsSettings.ApplicationContext.AuthenticationToken = "AuthenticationToken";        }

在我們的頁面中添加一個地圖控制項

        <!--ContentPanel - place additional content here-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <maps:Map x:Name="MyMap"  Center="39.92, 116.46" ZoomLevel="10"/>        </Grid>

public MainPage(){   InitializeComponent();   Map MyMap = new Map();   ContentPanel.Children.Add(MyMap);}

 

以上兩段代碼基本是等效的，但是細心的同學肯定注意到了 XAML檔案中指定兩個屬性值 Center 和 ZoomLeve  Center是指地圖所在中心點的經緯度位置，zoomlevel 是用來設定地圖的縮放層級（1-20）縮放層級越高 地圖的解析度也就對應越高。

public MainPage(){   InitializeComponent();   Map MyMap = new Map();   //Set the Map center by using Center property   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);   //Set the map zoom by using ZoomLevel property   MyMap.ZoomLevel = 10;   ContentPanel.Children.Add(MyMap);}

 

除了 Center 和 ZoomLevel 還有heading 和 pitch 屬性可以對地圖屬性進行設定

heading 是標誌地圖的"指向“ 介於 0 - 360 預設 0 北向上

pitch 是標誌地圖的傾斜度 0 - 180

void OnCenterZoom_Click(object sender, EventArgs args){   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);   MyMap.ZoomLevel = 18;}void OnAnimate_Click(object sender, EventArgs args){   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);}

 

其次地圖又分為幾種視圖模式

void Road_Click(object sender, EventArgs args){   MyMap.CartographicMode = MapCartographicMode.Road;}void Aerial_Click(object sender, EventArgs args){   MyMap.CartographicMode = MapCartographicMode.Aerial;}void Hybrid_Click(object sender, EventArgs args){   MyMap.CartographicMode = MapCartographicMode.Hybrid;}void Terrain_Click(object sender, EventArgs args){   MyMap.CartographicMode = MapCartographicMode.Terrain;}

 

還有一個比較任性話的設定 地圖顏色設定

void Light_Click(object sender, EventArgs args){   MyMap.ColorMode = MapColorMode.Light;}void Dark_Click(object sender, EventArgs args){   MyMap.ColorMode = MapColorMode.Dark;}

 這裡再向大家介紹一下 ，在地圖應用中通常標註位置的方法或路徑 我們會做一張圖片或者一個UI控制項，在此我告訴大家在 Nokia Map中如何添加一個UIElements或是一個定義控制項。

第一 在Nokia 地圖上顯示 自訂控制項/UIElements 是通過 MapOverlay 作為介質呈現的

第二 MapOverLay是要放在 MapLayer中 作為一個Item添加到 Nokia Map的Layer中去的

                        MapOverlay MyOverlay = new MapOverlay();                        MyOverlay.Content = GetGrid();                        MyOverlay.GeoCoordinate = new GeoCoordinate(CurrenLocation.Latitude, CurrenLocation.Longitude);                        MyOverlay.PositionOrigin = new Point(0, 0.5);                        MapLayer MyLayer = new MapLayer();                        MyLayer.Add(MyOverlay);                        MyMap.Layers.Add(MyLayer);

 

以上代碼實際上我是在地圖中添加了 一個GetGrid 函數傳回值。

        Grid GetGrid()        {            Grid MyGrid = new Grid();            MyGrid.RowDefinitions.Add(new RowDefinition());            MyGrid.RowDefinitions.Add(new RowDefinition());            MyGrid.Background = new SolidColorBrush(Colors.Transparent);            //Creating a Rectangle            Rectangle MyRectangle = new Rectangle();            MyRectangle.Fill = new SolidColorBrush(Colors.Black);            MyRectangle.Height = 20;            MyRectangle.Width = 20;            MyRectangle.SetValue(Grid.RowProperty, 0);            MyRectangle.SetValue(Grid.ColumnProperty, 0);            //Adding the Rectangle to the Grid            MyGrid.Children.Add(MyRectangle);            //Creating a Polygon            Polygon MyPolygon = new Polygon();            MyPolygon.Points.Add(new Point(2, 0));            MyPolygon.Points.Add(new Point(22, 0));            MyPolygon.Points.Add(new Point(2, 40));            MyPolygon.Stroke = new SolidColorBrush(Colors.Red);            MyPolygon.Fill = new SolidColorBrush(Colors.Red);            MyPolygon.SetValue(Grid.RowProperty, 1);            MyPolygon.SetValue(Grid.ColumnProperty, 0);            //Adding the Polygon to the Grid            MyGrid.Children.Add(MyPolygon);            return MyGrid;        }

 

當然這個函數只是一個參考這裡可以返回任意的 UI自訂控制項只要是基於UIElements即可。

 好了今天就先給大家介紹這麼多 後面我會在用一篇來介紹，如何?基於定位的後台應用程式，歡迎大家在這裡和我溝通交流或者在新浪微博上 @王博_Nick