Google Maps API學習筆記-2:在地圖上畫個日本結界

Google Map API學習筆記-2:在地圖上畫個日本結界

本篇參考、使用資源

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

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

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

官網Maps Javascript API文件
2 js framework:Vue.js
3 css framework:Bootstrap4

放個廣告賺點養主機的$$,謝謝


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

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

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

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

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

Google Map API學習筆記-1:地圖、標記、客製樣式


一、畫折線

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

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

「geodesic」這個參數,指的是要不要保留真實的地理形狀,true是保留,false是不保留,這在圖形是可以拖動時會看的比較明顯,想看對比的話可以看說明文件的範例

放個廣告賺點養主機的$$,謝謝

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

平將門北斗七星:折線圖+info windows
平將門北斗七星:折線圖+info windows

二、畫多邊形

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

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

畫完後的截圖如下:

天皇壓制平將門的正方形結界
天皇壓制平將門的正方形結界

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

折線+多邊形
折線+多邊形

三、畫圓形

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

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

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

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

畫圓形的API method如下:

畫完後的截圖如下:

圓形+多邊形
圓形+多邊形

四、共用參數:可否拖動、可否編輯

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

editable:boolean 可否編輯圖形
draggable:boolean 可否拖動

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

另外API裡也有寫拖動、編輯的事件監聽,說明文件上有寫出範例。

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

Drawing Tools


五、除了畫圖,也可以刪除、檢查

補充說明,API除了畫圖,也有刪除圖、檢查圖的用法,這部份實際上碰到的案子覺得不太會遇到,就不實作了,請直接看說明文件


六、本篇用到的原始碼

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


Google Maps API學習筆記系列

  1. 地圖、標記、客製樣式
  2. 在地圖上畫個日本結界
  3. 用熱圖(Heat map)製作全台12小時雨量分佈圖
  4. place API自動完成地址、地點評論摘要
  5. 抓目前位置、計算到各點距離

Summary
Google Maps API學習筆記-2:在地圖上畫個日本結界
Article Name
Google Maps API學習筆記-2:在地圖上畫個日本結界
Description
本篇大綱:畫折線、畫多邊形、畫圓形、共用參數:可否拖動、可否編輯。除了畫圖,也可以刪除、檢查、本篇用到的原始碼。前幾天看老高與小茉的youtube影片,看到日本有2個結界,正好Google Maps API的文件看到在地圖上畫幾何圖形這塊,就想說不然拿這個當範例好了,還正好適合。
Augustus
Let's Write
Let's Write
Publisher Logo

留言