Google Maps JavaScript API - 計算地圖任兩點之距離 幾何圖形library Web HTML javascript

Google Maps API 是Google開放的眾多API之一類
旗下又有細分為多種不同功能之API，有全景圖像的，自訂google內容的，又或者是提供給行動裝置使用的......等等

這次並不是要為API做詳解
而是針對Maps JavaScript API中的『幾何圖形程式庫媒體庫』做一個小教學
※教學以你已經設置好基本的Google Map在你的網頁中為前提

使用Google Maps JacaScript API為地圖上兩點測距
官方教學有詳細說明了投影原理，在此不再贅述

直接開始實作吧!!

1. 首先我們先了解一下3個函數
    (1) computeDistanceBetween(): 只限計算兩點之間的直線距離
    (2) computeLength(): 可計算多點之間連線路徑長度
    (3) computeArea(): 計算多邊形區域面積
    距離的單位為公尺 面積單位為平方公尺

    都需要將LatLng物件傳遞給以上函數，後面將會說明創立此物件


2. 在你的HTML檔額外載入 Geometry library，為計算使用

code

<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY&libraries=geometry"></script>

3. 創建兩個任意經緯值的點
    (lat: 緯度  lng: 經度)

code

var Point1 = {
          lat: 25.046402, 
          lng: 121.517536
        }
var Point2 = {
          lat: 25.033601, 
          lng: 121.564793
        }

4. 使用步驟1. 函數，這裡使用計算兩點間距離之函數

code

google.maps.geometry.spherical.computeDistanceBetween(
                       new google.maps.LatLng(Point1),
                       new google.maps.LatLng(Point2)
                     )

在一般的地圖設定中心或位置只要使用3. 之物件就可直接設定
但這裡比較特別的是，要注意步驟3. 的物件不能直接能來使用，
必須再加上 new google.maps.LatLng() 轉換為經緯度物件才執行。

基本上就大功告成啦!!

函數計算完為數字，所以你可以拿來計算或比較都可以。

測試看看你輸出的數字跟我的是不是相同的~

code

4974

參考資料:
https://developers.google.com/maps/documentation/javascript/geometry?hl=zh-tw



(以上皆為實際測試研究，如說明有誤請留言或私訊告知我，感謝 !)