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

  • 886
  • 0
  • 2015-09-15

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

說明

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

結果

1.按下逢甲夜市的Button紐之後,能快速的定位到逢甲夜市的地方。
2.按下文心南路的Button紐之後,也能定位到文心南路的所在位址。

3.滑動底下的Slider Bar 能縮放地圖。

image image

以下就開始實作吧!

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

image

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

image

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

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

image

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

image

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

image

Step3. 接下來就是UI部分,首先在方案總管底下的[MainPage.xaml]點兩下開啟。
image
在[Grid]新增兩顆[Button]幫它取名當然名字可以自己取、我這邊專案叫Btn_1,Btn_2,Content內容自設,我這邊是叫逢甲夜市、文心南路夜市。

image

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

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

image
產生的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 ]檔點兩下。
會進入到後端程式。

image

首先我們要先處理MainPage load 事件設定map顯示台中市政府的位置(緯度與經度)

在MainPage()方法裡面,打上Loaded+=之後Tab鍵按兩下,其他控制項以此類推。

image 

會自動生成loaded的方法,把throw new…刪掉之後就可以開始寫程式了。

image


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;
        }

image

定義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縮放層級屬性。

這功能我最近有用到,希望能幫助到開發者們,當然也能應用在OpenData有提供經緯度的資料,設定也行。
就看各位怎麼用,下一篇會講到如何新增定位點。