[新手開發日記02] Xamarin.Forms 地圖顯示與定位－Hi, Erin.

好不容易搞定開發環境，終於要進入主題了！

· 地圖！

分別又列了四個步驟：1.顯示地圖 2.定位 3.客製化Pin 4.將Pin連結資料庫

目前進度在 2.定位，可是因為地圖功能很普遍，網路上非常多教學與討論，所以找到不少範例

進度竟然還比設定開發環境快多了！但也是經歷了不少波折．．．

例如一開始參考的範例是這一篇： Xamarin.Forms 地圖功能|Xamarin Research

裡面有用到Tabbed Page，icon，地圖套件，google map API Key的申請...

可是我一開始根本不知道 Tabbed Page是什麼，

而且project裡只有MainPage這種，所以先用了笨方法 button跳轉 XDD

還去搜尋了跳轉的語法來用（看我多菜！最後地圖也成功出現了，然後我開始研究Tabbed Page

找到一個很佛心的blog將英文版手冊翻成中文，提供了許多很基礎的知識：邊緣技術宅羅根Xamarin.Forms 教學系列文

手癢癢的將我的project改成Tabbed Page形式，然後作個簡單的版面調整，看起來的確美觀多了

這過程中我使用的套件也有變更

從Xamarin.Forms.Map換成Xamarin.Forms.GoogleMaps，順便參考了作者的Demo

終於將code改成我需要的樣子了（改久也會熟能生巧的）

ＢＵＴ！範例當中的地圖顯示方式是固定的，也就是說把經緯度寫進code裡了！

因此我需要另外尋找定位的方式

這部分我歷經了３次不同的參考範例

第一次是：Day27 – Xamarin.Forms新增打卡資料 Part1加入GPS打卡功能

使用的套件主要是 Xam.Plugin.Geolocator ，加上兩個附加套件 Plugin.CurrentActivity ＆ Plugin.Permissions

這個階段我很認真的在研究如何setup以及如何改才能將定位與地圖結合

不只參考了範例裡的code，以及套件作者給的sample，還加上GoogleMaps套件作者的Demo

雖然很認真的修改到沒有出現bug，但跑實機測試時，定位還是跑到大西洋去了

顯然這樣不行，或許對我來說太複雜

所以我又找到了第二份範例：Xamarin.Essentials 體驗 5 : Geolocation 地理位置

這次使用的套件簡單多了！

所以我立刻將那三個套件解除安裝，改成新的套件，然後修改一下code，就開始嘗試把範例的code套進去

因為我並不想要必須用button跟picker的功能才取得經緯度，而是直接將取得經緯度並放進地圖裡

在我修改完卻發現執行時並沒有跑到那段程式，有些不知道該如何進行下一步的時候

剛剛好讓我找到這份code：Xamarin Forms Map and Finding Location

真是天助我也！！感謝好心人～

雖然他用的套件跟我使用的不同，但這還蠻容易改的，所以！！將將～成功定位了～～灑花～～

加上藍點的語法是Xamarin.forms.googlemaps套件裡的：issue#403

改完後程式碼如下：

using System;
using Xamarin.Forms;
using Xamarin.Forms.GoogleMaps;
using Xamarin.Essentials;
.
.
.
    public partial class MapPage : ContentPage
    {
        private double Latitude;
        private double Longitude;

        public MapPage()
        {
            InitializeComponent();
            GetLocation();
        }
        private async void GetLocation()
        {
            var request = new GeolocationRequest(GeolocationAccuracy.Best, TimeSpan.FromSeconds(10));
            var location = await Geolocation.GetLocationAsync(request);
            Latitude = location.Latitude;
            Longitude = location.Longitude;
            
            map.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(Latitude, Longitude), Distance.FromKilometers(1)));   //定位ok
            map.MyLocationEnabled = true;                                                                                   //藍點ok

        }
    }
.
.
.

因為歷經多次砍掉重練，拚拚湊湊之下我也不確定是不是最有效率的寫法

總之，可以跑出我要的結果就是了