[Windows Phone] 地圖覆疊層控制項(MapOverlay )

當使用地圖時,我們可能需要定位一些座標圖示或是繪製一些文字線條,這時可以在地圖上加上覆疊層進行繪製,在 Windows Phone 應用程式中是透過地圖覆疊層控制項(MapOverlay )來達成,本文將以實例展示如何使用。

前言

當使用地圖時,我們可能需要定位一些座標圖示或是繪製一些文字線條,這時可以在地圖上加上覆疊層進行繪製,在 Windows Phone 應用程式中是透過地圖覆疊層控制項(MapOverlay )來達成,本文將以實例展示如何使用。

 

實作

step1 建立專案。

map

 

step2 在 WMAppManifest.xml 滑鼠左鍵按兩下進行編輯。

1

 

step3 開啟 WMAppManifest.xml 後,先切換至 [功能] 索引標籤,再勾選 [ID_CAP_MAP] 來開啟地圖功能。

2

 

step4 畫面設計。

12

 

map 控制項,Name 屬性:map,Center 屬性:24.167, 120.883(為台中市和平區經緯度),ZoomLevel 屬性:10。

產生 xaml 的程式如下:

在 phone:PhoneApplicationPage.xaml 加入下方程式碼引用 Microsoft.Phone.Maps,才能使用地圖控制項。


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

 


        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <maps:Map x:Name="map" HorizontalAlignment="Left"  Center=" 24.167,120.883" ZoomLevel="10" Margin="0,10,0,0" VerticalAlignment="Top" Height="587" Width="446"/>

        </Grid>

 

step5 MainPage.xaml.cs 程式碼中的事件處理函式如下:

 


       	public MainPage()
       	{
           InitializeComponent();

           // 新增兩列的格子配置,背景為透明
           Grid MyGrid = new Grid();
           MyGrid.RowDefinitions.Add(new RowDefinition());
           MyGrid.RowDefinitions.Add(new RowDefinition());
           MyGrid .Background =new SolidColorBrush(Colors.Transparent);

           // 建立一個紅色直徑35的圓
           Ellipse Mycir = new Ellipse();
           Mycir.Fill = new SolidColorBrush(Colors.Red);
           Mycir.Height = 35;
           Mycir.Width = 35;
           Mycir.SetValue(Grid.RowProperty, 0);
           // 將圓放到格子中
           MyGrid.Children.Add(Mycir); 

           // 在格子第一列的地方,建立一個框為紫色、裡面填滿黃色的三角形
           Polygon Mytriang = new Polygon();
           Mytriang.Points.Add(new Point(2, 0));
           Mytriang.Points.Add(new Point(22, 0));
           Mytriang.Points.Add(new Point(2, 40));
           Mytriang.Stroke = new SolidColorBrush(Colors.Purple);
           Mytriang.Fill = new SolidColorBrush(Colors.Yellow);
           Mytriang.SetValue(Grid.RowProperty, 1);
           // 將三角形加入格子裡
           MyGrid.Children.Add(Mytriang);

           // 建立覆疊層然後把格子配置放進來
           MapOverlay Myoverlay = new MapOverlay();
           Myoverlay.Content = MyGrid;

           //(24.15,120.43)為覆疊層座標
           Myoverlay.GeoCoordinate = new GeoCoordinate(24.167, 120.883);
           Myoverlay.PositionOrigin = new Point(0, 0.5);

           //新增一個地圖層並將覆疊層放進來
           MapLayer Mylayer = new MapLayer();
           Mylayer.Add(Myoverlay);
           map.Layers.Add(Mylayer);
	}

 

結果

在地圖中,透過地圖覆疊層控制項,顯示圓與三角形於定位的位置。

 

範例檔

覆疊層.rar

 

相關參考與引用

MapOverlay Class