Google Maps API 學習筆記 - 2：在地圖上畫個日本結界
Tags: javascript, googlemap, api, tutorial
Published: 2022-07-12 01:58:32

## 本篇大綱

- [本篇參考、使用資源](https://www.letswrite.tw/google-map-api-geometry/)
- [畫折線](https://www.letswrite.tw/google-map-api-geometry/#%e4%b8%80%e3%80%81%e7%95%ab%e6%8a%98%e7%b7%9a)
- [畫多邊形](https://www.letswrite.tw/google-map-api-geometry/#%e4%ba%8c%e3%80%81%e7%95%ab%e5%a4%9a%e9%82%8a%e5%bd%a2)
- [畫圓形](https://www.letswrite.tw/google-map-api-geometry/#%e4%b8%89%e3%80%81%e7%95%ab%e5%9c%93%e5%bd%a2)
- [共用參數：可否拖動、可否編輯](https://www.letswrite.tw/google-map-api-geometry/#%e5%9b%9b%e3%80%81%e5%85%b1%e7%94%a8%e5%8f%83%e6%95%b8%ef%bc%9a%e5%8f%af%e5%90%a6%e6%8b%96%e5%8b%95%e3%80%81%e5%8f%af%e5%90%a6%e7%b7%a8%e8%bc%af)
- [除了畫圖，也可以刪除、檢查](https://www.letswrite.tw/google-map-api-geometry/#%e4%ba%94%e3%80%81%e9%99%a4%e4%ba%86%e7%95%ab%e5%9c%96%ef%bc%8c%e4%b9%9f%e5%8f%af%e4%bb%a5%e5%88%aa%e9%99%a4%e3%80%81%e6%aa%a2%e6%9f%a5)
- [本篇用到的原始碼](https://www.letswrite.tw/google-map-api-geometry/#%e5%85%ad%e3%80%81%e6%9c%ac%e7%af%87%e7%94%a8%e5%88%b0%e7%9a%84%e5%8e%9f%e5%a7%8b%e7%a2%bc)
- [Google Maps API 學習筆記系列](https://www.letswrite.tw/google-map-api-geometry/#google-maps-api-%e5%ad%b8%e7%bf%92%e7%ad%86%e8%a8%98%e7%b3%bb%e5%88%97)

---

## 本篇參考、使用資源

前幾天看老高與小茉的 Youtube 影片，看到日本有2個結界：平將門的北斗七星，跟天皇為了壓制這北斗七星的一個正方形。

正好 Google Maps API 的文件看到在地圖上畫幾何圖形這塊，就想說不然拿這個當範例好了，還正好適合。

本篇參考、使用資源如下：

1. [官網 Maps Javascript API 文件](https://developers.google.com/maps/documentation/javascript/shapes?hl=zh-tw)  
2. JS Framework：[Vue.js](https://vuejs.org/)  
3. CSS Framework：[Bootstrap4](https://getbootstrap.com/)

一個幾何圖形，就是由點、線、面構成，2點成1線，3點成1面。

在 Google Map 上畫圖也是這樣，用座標當點，點設完以後，在看使用的 API 是單純的折線，還是要用線來連成一個面。

官方文件上畫的圖形有以下：折線、多邊形、方形、圓形。

這篇偷懶，覺得多邊形設成四邊就是方形了，因此就畫折線、多邊形、圓形這 3 種就好。

這篇會用到很多前一篇講的東西，有用到的code就不會再寫上，建議先看一下前一篇：

[Google Maps API 學習筆記 – 1：地圖、標記、客製樣式](https://letswrite.tw/google-map-api-marker-custom/)

---

## 畫折線

跟前一篇一樣，把要畫的圖形，會用到的地點存成一個 .geojson 檔裡。

畫折線，只需要把每一個點寫成經緯度物件，存在一個陣列裡，然後 call API 的 method 就行，API method 如下：

{% embed https://gist.github.com/letswritetw/8ec66712ed0e864fef975f0827bc9bfd %}

「geodesic」這個參數，指的是要不要保留真實的地理形狀，`true` 是保留，`false` 是不保留，這在圖形是可以拖動時會看的比較明顯，想看對比的話可以看 [說明文件的範例](https://developers.google.com/maps/documentation/javascript/shapes?hl=zh-tw#draggable)。

折線圖畫完，再加上每個點的 info windows，這邊用平將門的北斗七星結，畫完的截圖如下：

![平將門北斗七星：折線圖 + info windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8dxk5v7r1mn2pu285dj.png)

---

## 畫多邊形

畫多邊形的方式，跟畫折線很像，只是用到的 API method 不一樣。

把天皇的正方形座標存成 geojson 後，用到的 method 如下：

{% embed https://gist.github.com/letswritetw/6b58f909f0a7e6bf84cc1df914816858 %}

畫完後的截圖如下：


![天皇壓制平將門的正方形結界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mukznyoaxphhhofc4plf.png)

最後，多邊形畫完後，再畫2條折線出來，把上面的北斗七星加上去，就可以看到完整的 2 個結界了，截圖如下：


![折線+多邊形](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhitjkjyudabatxs59dl.png)

---

## 畫圓形

畫圓形比上面兩個圖形簡單，因為畫圓只需要 2 個值：圓心、半徑。

這邊來畫一個日本京都南部的結界。

京都南結界是一個五芒星形，這個用上面講的多邊形就行了。

把五芒星的五個點連起來，就會有一個圓形。

畫圓形的 API method 如下：

{% embed https://gist.github.com/letswritetw/27a709ef1374be81be4b36dbbd642c32 %}

畫完後的截圖如下：

![圓形+多邊形](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojpry4pqbcb1wmaxee7k.png)

---

## 共用參數：可否拖動、可否編輯

畫圖形時，還有共用的參數，除了畫折線時提到的「geodesic」，另外就是：

`editable`：boolean 可否編輯圖形  
`draggable`：boolean 可否拖動

所以如果只是單純有趣想畫個東西，可以都把折線、多邊形、圓形畫出來後，直接在地圖上拉點、拉圖形去畫。

另外 API 裡也有寫拖動、編輯的事件監聽，[說明文件](https://developers.google.com/maps/documentation/javascript/shapes?hl=zh-tw#editable_events) 上有寫出範例。

補充：Google Maps API 有一個 library，是可以直接在 Map 上畫畫的，不用先用 code 畫出個什麼在去編輯，而是可以直接在地圖上拉出折線、多邊、圓、方的功能，文件範例及 code 可參考文件。

[Drawing Tools](https://developers.google.com/maps/documentation/javascript/examples/drawing-tools?hl=zh-tw)

---

## 除了畫圖，也可以刪除、檢查

補充說明，API 除了畫圖，也有刪除圖、檢查圖的用法，這部份實際上碰到的案子覺得不太會遇到，就不實作了，請直接看 [說明文件](https://developers.google.com/maps/documentation/javascript/shapes?hl=zh-tw#polyline_remove)。

---

## 本篇用到的原始碼

本篇用到的原始碼有放到 GitHub 上，歡迎參考。

<https://github.com/letswritetw/letswrite-google-map-api-2>

---

## Google Maps API 學習筆記系列  

1. [地圖、標記、客製樣式](https://letswrite.tw/google-map-api-marker-custom/)  
2. [在地圖上畫個日本結界](https://letswrite.tw/google-map-api-geometry/)  
3. [用熱圖（Heat Map）製作全台 12 小時雨量分佈圖](https://letswrite.tw/google-map-api-heat-map/)  
4. [Place API 自動完成地址、地點評論摘要](https://letswrite.tw/google-map-api-place-api/)
5. [抓目前位置、計算到各點距離](https://letswrite.tw/google-map-api-distance-matrix/)
6. [畫新冠肺炎分佈圖](https://letswrite.tw/google-map-api-covid/)