實作 Google Maps 右鍵選單 此作品主要在於開發出可以在 Google Maps 上面編輯基本路徑的功能,利用 Google Maps JavaScript API 設計出規劃路線的工具,並且可以匯出路間經緯度 Excel。 在 Google Maps 上顯示選單,主要是使用 Google Maps JavaScript Events 來實作,並且搭配 Marker、Polyline 來繪製出路線圖,並且針…

實作 Google Maps 右鍵選單

此作品主要在於開發出可以在 Google Maps 上面編輯基本路徑的功能,利用 Google Maps JavaScript API 設計出規劃路線的工具,並且可以匯出路間經緯度 Excel

在 Google Maps 上顯示選單,主要是使用 Google Maps JavaScript Events 來實作,並且搭配 MarkerPolyline 來繪製出路線圖,並且針對 Marker 綁定 Event 來實作 刪除節點 的功能。

此實作中有一項特別的技巧,就是在 Ployline 上點擊滑鼠右鍵時,必須要可以 插入節點 的功能,難點是在於 Maps 上的 Google Maps PositionGoogle Maps Point 物件的轉換,必須將點擊位置的經緯度經計算後得知在地圖元素上相對應的 left、top 數值,再將選單顯示在該位置上。

因為要針對不同區段的 Polyline 監聽 Event,所以必須使用特別的方式去畫出 Polyline,目前我所使用的方法是將 Markers 之間用單個 Polyline 做連接,所以地圖上 Polyline 的數量會是 Marker 的 n-1 個,如此一來就可以對每段 Polyline 監聽 Event 了!

當插入節點時,便可以取出該 Polyline 是位於哪兩個 Markers 之間,這時候再針對陣列去做橋接,重組後的 Markers 陣列再重新繪製一次 Polyline 即可!

相關參考

在 Google Maps 內多邊形取點 Point in Polygon - OA Wu's Blog
在 Google Maps 內多邊形取點 Point in Polygon
在 Google Maps 內多邊形取點 Point in Polygon 這是項個人開發的工具,而且需要前後端配合一起弄的作品,主要目的是撈出藉由不規則多邊形範圍內的點座標。 前端 主要是 Google Maps JavaScript API v3 的地圖服務應用,利用 Google Maps Marker、Google Maps Polyline 去畫出一個不規則多邊形,並且利用 Ajax 去後端撈取…
全景相簿 Theta S 360 - OA Wu's Blog
全景相簿 Theta S 360
全景相簿 Theta S 360 這是一項特別的作品,由於近幾年全景攝影器材的進步,所以全景影片、全景照片漸漸的流行起來,而最近剛好也入購了 RICOH Theta S 全景攝影機,所以我便實作了一下 360度全景相簿,這作品我特意分成兩個專案,分別是純前端、純後端的角度切入,所以在 GitHub 上會有兩包 code,以下會大略的說明! 由…
雙北市行政區域範圍座標 - OA Wu's Blog
雙北市行政區域範圍座標
雙北市行政區域範圍座標 雙北市行政區域範圍座標,藉由大家一起來維護劃分出雙北市甚至於全台灣的行政區域、鄉鎮區域的範圍座標。 會實作出此專案主要目的是為了取得雙北市行政區域範圍座標,但因為 Google Maps JavaScript API 找不到可以取得行政區的範圍座標,故才自己畫完雙北市的範圍座標,並且藉此分享出來給大家使…
2016 白沙屯媽祖南下進香 GPS 系統 - OA Wu's Blog
2016 白沙屯媽祖南下進香 GPS 系統
2016 白沙屯媽祖南下進香 GPS 系統 白沙屯媽祖南下北港遶境 GPS 定位實作,是我目前 Google Analytics(GA) 即時流量 最高也是 Server Loading 最大的任務之一,實作過成功嘗試多樣的系統架構,以達成最低成本、最高效率的方式服務信徒。 此項任務難點會在活動期間會有大量的 Request 打進 Server,所以勢必會對伺服器造成…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
實作 Google Maps 右鍵選單