<Windows Phone 8>地圖經度與緯度(1)

2013-11-05

888
0
2015-09-15

用來定位用的經度與緯度，相信開發者也會常常用到這功能，以下將介紹Map控制項，只要簡單的幾行程式碼，
就能做到這樣豐富的功能。

說明

用來定位用的經度與緯度，相信開發者也會常常用到這功能，以下將介紹Map控制項，只要簡單的幾行程式碼，
就能做到這樣豐富的功能。

結果

1.按下逢甲夜市的Button紐之後，能快速的定位到逢甲夜市的地方。
2.按下文心南路的Button紐之後，也能定位到文心南路的所在位址。
3.滑動底下的Slider Bar 能縮放地圖。

以下就開始實作吧!

Step1. 建立一個專案[新增>專案]。

選擇[Visual C#> Windows Phone > Windows Phone 應用程式]，再點確定。

Step2. 接下來我們要做一件事情，就是把Windows Phone 的Map功能打勾。

在專案總管裡面的["您自己取的專案名稱" > Proerties > WMAppManifest.xml]，點兩下。

會跳出以下畫面點選上面的Bar，[功能]。

找到[ID_CAP_MAP]的Bar，把它打勾，這樣就能提供地圖功能了。這樣就結束了嗎? 不! 還有步驟三。

Step3. 接下來就是UI部分，首先在方案總管底下的[MainPage.xaml]點兩下開啟。

在[Grid]新增兩顆[Button]幫它取名當然名字可以自己取、我這邊專案叫Btn_1，Btn_2，Content內容自設，我這邊是叫逢甲夜市、文心南路夜市。

Btn_2 步驟一樣，這邊不解釋。
新增一個Map控制項，當然也幫它取名，我這邊取名叫Map_1。

新增一個Slider Bar，當然這邊也幫它取名，我這邊取名叫Slider_1。

產生的Xaml碼
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="Btn_1" Content="逢甲夜市"
               HorizontalAlignment="Left"
               Margin="10,10,0,0" 
               VerticalAlignment="Top"/>

            <Button x:Name="Btn_2" 
              Content="文心南路夜市" 
              HorizontalAlignment="Left"
              Margin="151,10,0,0"
              VerticalAlignment="Top"/>

            <maps:Map x:Name="Map_1" 
              HorizontalAlignment="Left"
              Margin="10,82,0,0"
              VerticalAlignment="Top" 
              Height="455" Width="446"/>

            <Slider x:Name="Slider_1" 
              HorizontalAlignment="Left" 
              Margin="10,527,0,0" 
              VerticalAlignment="Top" Width="436"/>

        </Grid>
Step4. 處理的函式
首先開啟再方案總管底下的[MainPage.xaml > MainPage.xaml.cs ]檔點兩下。
會進入到後端程式。

首先我們要先處理MainPage load 事件設定map顯示台中市政府的位置(緯度與經度)
在MainPage()方法裡面，打上Loaded+=之後Tab鍵按兩下，其他控制項以此類推。

會自動生成loaded的方法，把throw new…刪掉之後就可以開始寫程式了。
public MainPage()
        {
            InitializeComponent();

            Loaded += MainPage_Loaded;
            Btn_1.Click += Btn_1_Click;
            Btn_2.Click += Btn_2_Click;
            Slider_1.ValueChanged += Slider_1_ValueChanged;
        }
首先我們要設定經緯度，建立一個setmap方法，一開始地圖先定位在台中市政府。
如何查經緯度請參考:http://card.url.com.tw/realads/map_latlng.php。
還有設定Slider Bar 縮放的最大與最小值跟初始值。
//MainPage loaded
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            setMap(24.246982, 120.720833);
            Slider_1.Minimum = 1;
            Slider_1.Maximum = 20;
            Slider_1.Value = 10;
        }
定義setMap方法可依傳入的經度(lat)與緯度(lng)來設定map的位置
Map_1.ZoomLevel縮放層級設定為15。
private void setMap(double lat, double lng)
        {
            Map_1.Center = new System.Device.Location.GeoCoordinate(lat, lng);
            Map_1.ZoomLevel = 15;  //指定map的縮放層級為15

        }
Btn_1 Click 事件，把參數帶給SetMap方法，讓地圖去定位。
//定位逢甲夜市
        void Btn_1_Click(object sender, RoutedEventArgs e)
        {
            setMap(24.1784149, 120.64839119999999);
        }
Btn_2 Click 事件，如Btn_1 Click事件。
//定位文心南路夜市
        void Btn_2_Click(object sender, RoutedEventArgs e)
        {
            setMap(24.116514, 120.65418669999997);
        }
再來就是設定Slider Bar 的 ValueChange方法。
// 當捲軸的值改變時，即同步設定map的縮放比例
        void Slider_1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Map_1.ZoomLevel = Slider_1.Value;
        }
當Slider Bar 值改變時會觸發 Value Change 方法。
將Slider Bar 的Value 傳給 Map控制項的ZoomLevel縮放層級屬性。