Alex宅幹嘛-你的jQ我來Vue單元

17來ViewVue了....👉👈

DEMO網址：

https://tinatyc.github.io/UrJqLetMeVue_GoogleMap/index.html

應用服務說明

簡易串接GoogleMap API

功能說明

---

🔸套用客製化Style

說明：

點擊TabBar可切換地圖的style，使用到jq的addClass()&removeClass()，切換到Alex Style按鈕時，使用到jq $.ajax呼叫已經存好的mapStyle.json。

參考網址:

• Google Maps APIs Styling Wizard
• Styling documentation

DEMO:

---

🔸取得當前位置

說明：

點擊取得當前位置，瀏覽器會問允許取得位置權限> 允許後map帶入當前的經緯度座標， 使用到原生js的getCurrentPosition()。

參考網址:

• MDN - Geolocation.getCurrentPosition()
• Google Maps Geolocation documentation

DEMO:

---

🔸HTML5 Web Storage (localStorage)

說明：

取得當前位置後，Map的infoWindow會跳出自訂的資訊，按儲存當前位置按鈕，會把當前座標存到localStorage裡，下次重新載入頁面時會判斷有無記憶座標，有則帶入儲存的位置、無則帶入出初始位置。 PS：在無全部關閉瀏覽器的情況下

參考網址:

• MDN - window.localStorage

DEMO: