吳政賢 OA Wu LiveCoding.tw
在 Google Maps 內多邊形取點 Point in Polygon - OA Wu's Blog

在 Google Maps 內多邊形取點 Point in Polygon

前端 Google HTML API WEB JavaScript CSS CSS3 HTML5 jQuery SCSS Compass Gulp OAF2E 後端 PHP CodeIgniter Google Maps

這是項個人開發的工具,而且需要前後端配合一起弄的作品,主要目的是撈出藉由不規則多邊形範圍內的點座標。

在 Google Maps 內多邊形取點 Point in Polygon
Demo 動畫

 

前端 部分主要是 Google Maps JavaScript API v3 的地圖服務應用,利用 Google Maps MarkerGoogle Maps Polyline 去畫出一個不規則多邊形,並且利用 Ajax 去後端撈取範圍內的 Marker,當 Ajax 傳回後端之前,先將該多邊形角的座標點利用 Google Maps LatLngBounds 物件計算出多邊形的範圍(東北-西南)座標,然後將範圍座標以及多邊形的角座標一併回傳給後端。

後端 部分則使用 CodeIgniter 最簡單的寫法,當接收到 Ajax 的 Request 之後,便開始撈資料。撈取資料的步驟拆成兩個步驟,首先利用範圍座標的東北-西南座標進 MySQL 撈出範圍內的點,此時的點是一個矩形範圍,所以需要再進入第二項的 filter 利用公式將多邊形外的點過濾掉,最後 Output 回去給前端即可。

此包專案使用原生 CodeIgniter 所撰寫,所以有基礎的 CodeIgniter framework know how 即可看懂。

  • 前端 JavaScript 位置在:assets/js/main.js
  • 後端 controller 位置在:application/controllers/main.php
  • 後端撈出範圍座標的作法:application/models/marker_model.php
  • 後端計算多邊形範圍內的 function:application/helpers/main_helper.php

 

因系統維護關係,所以目前已暫時先將 Live Demo 網址關閉囉,請大家先參考 GitHub 的原始碼吧!