Google Maps API 學習筆記- 5：抓目前位置、計算到各點距離

使用Distance Matrix API 跳至主要內容 GoogleMapsAPI學習筆記–5：抓目前位置、計算到各點距離 2021-08-292019-09-17/August 本篇大綱 目前所在位置確認支援geolocation跟使用者要位置的權限計算到各點距離DistanceMatrixService開啟權限DistanceMatrixAPI限制使用DistanceMatrixAPIAPI回傳的值實際應用：所在地與其它地點的距離GoogleMapsAPI學習筆記系列 本篇會寫兩個用GoogleMapsAPI會遇到的狀況，就是目前使用者的所在位置，以及所在位置到目的地的距離。

目前所在位置 抓使用者目前所在位置，用的是瀏覽器本身的geolocation。

在使用navigator.geolocation時，有2個步驟： 確認使用者的裝置支援navigator.geolocation跟使用者要索取目前位置的權限 確認支援geolocation 程式碼如下： if(navigator.geolocation){ //執行要權限的function }else{ alert('Sorry,你的裝置不支援地理位置功能。

') } 跟使用者要位置的權限 基本上所在位置是隱私的一部份，所以要拿使用者所在位置時，各瀏覽器一定會在使用者允許的狀態下才執行。

會跟使用者要權限的狀況，我們一般在操作GoogleMap的頁面或App時就會看到，像這樣： 要位置資訊的提示窗桌機 要注意的是，要位置資訊權限的部份，只能在https下執行，如果網址是http就無法。

要位置權限的code在MDN：地理位置定位(Geolocation)這邊就寫的很完整了，本篇這段就做個簡單的整理： 當使用者允許後，回傳的資料如下： 這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 允許位置權限後，回傳的資料 latitude、longitude，這2個值就是經緯度。

計算到各點距離DistanceMatrixService 計算一個點到其它點的距離，在GoogleMapsAPI上的功能就叫DistanceMatrixService。

要使用DistanceMatrixService，必須先到GCP上開啟API的權限。

開啟權限 進到GoogleCloudPlatformConsole的頁面，接著選取要開通DistanceMatrixAPI權限的專案，就會看見後台介面的上面有一個「啟用API和服務」，點下去後會進到GoogleAPI的頁面： 點擊啟用API和服務 GoogleAPI頁面 在搜尋框中搜尋DistanceMatrixAPI，就會看見有一項結果： 搜尋DistanceMatrixAPI的結果 按下後，進到DistanceMatrixAPI的介紹頁面，再按下「啟用」： 按下啟用 啟用後，就可以使用DistanceMatrixAPI了。

DistanceMatrixAPI限制 GoogleMapsAPI每月有200美金的額度，超過後就會收費，用多少算多少。

一些限制在官方文件中有提到，比較要注意的是這點： 這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 Maximumof25originsand25destinationsper server-side requestPricingandpolicies 根據本人實際使用的經驗，這句白話就是，每調用一次API去計算一個點到其它點的距離時，最多就是計算25個點的距離，超過25個點就會失敗。

使用DistanceMatrixAPI 以下官方文件上的範例： 這邊說明一下參數的意思，下一段會示範從使用者所在地，去計算與其它點的距離當實際範例。

origins 就是起點，原始點，用起點去抓與destinations那些點的距離，下一段的範例中就會是使用者的所在地點。

destinations 要計算距離的點，下一段的範例中會先設好市政府附近的5個點，然後抓與所在地的距離。

travelMode 交通方式，不同的交通方式會回傳不同的所需時間，有以下4個值： DRIVING開車，預設值BICYCLING自行車TRANSIT大眾運輸WALKING走路 unitSystem 計算距離的單位，有以下2個值： METRIC公里，預設值IMPERIAL哩 avoidHighways、avoidTolls 是否避開高速公路、是否避開收費路線 API回傳的值 DistanceMatrixAPI在callback會回傳的資料如下： DistanceMatrixAPI回傳的資料 rows是一個陣列，origins裡有幾個值，rows就會有幾個。

API會把origins裡的地點一個個去跟destinations陣列裡的每一個地點去計算距離。

跟每一個地點的距離，會回傳距離、到達所需時間。

還很貼心的分成數值跟文字，這樣在排列的時候，就可以用距離/時間去排列。

實際應用：所在地與其它地點的距離 本篇接下來會寫一個範例，就是跟使用者要完所在地的經緯度後，呼API去計算市府附近5個地點的距離，最後會附上原始碼的網址。

跟使用者要所在地的經緯度，前面幾段就寫好了，這邊接著寫要完經緯度後做的事。

首先，就是把所在地經緯度設成origins： letoriginPosition=newgoogle.maps.LatLng(position.coords.latitude,position.coords.longitude); 接著，把設定好的5個地點，他們的經緯度push進destinations裡： //5個地點的資料在features裡 letdestinations=[]; Array.prototype.forEach.call(features,f=>{ destinations.push(newgoogle.maps.LatLng(f.geometry.coordinates[0],f.geometry.coordinates[1])); }); API的callback，就是把收回來的資料，依序塞進5個點的資料中： functioncallback(response,status){ for(leti=0,len=features.length;i{ returna.properties.distance>b.properties.distance?1:-1; }); 本篇配合Vue.js，加上Bootstrap的UI，完成後看到的截圖如下： 串完DistanceMatrixAPI的範例截圖 範例的原始碼也放在GitHub上了，歡迎取用： https://github.com/letswritetw/letswrite-google-map-api-5 GoogleMapsAPI學習筆記系列 地圖、標記、客製樣式在地圖上畫個日本結界用熱圖（HeatMap）製作全台12小時雨量分佈圖PlaceAPI自動完成地址、地點評論摘要抓目前位置、計算到各點距離畫新冠肺炎分佈圖 收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印 看過本篇的人也看過： SummaryArticleNameGoogleMapsAPI學習筆記-5：抓目前位置、計算到各點距離Description本篇大綱：目前所在位置、確認支援geolocation、跟使用者要位置的權限、計算到各點距離DistanceMatrixService、開啟權限、DistanceMatrixAPI限制、使用DistanceMatrixAPI、API回傳的值、實際應用。

Augustus Augustus Let'sWrite Let'sWrite https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg 以下是留言，但關於留言的部份必需先讓你們知道： 本站的文章都是August因為覺得有趣，才會實作並整理成筆記文而後進行發表。

如果留言是希望把Demo改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子， Sorry~除非那修改是August也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。

😎 另外，公開信箱是為了讓金流驗證用， 因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。

因此決定不再回覆信件，有疑問就利用留言功能囉。

搜尋: Translate 繁體中文English日本語简体中文 最新文章 做一個簡單的網頁截圖功能 Vue3、TailwindCSS3、esbuild、rollup.js開發初始檔 ColorThief找出圖片裡的顏色 OSM+Leaflet學習筆記3：定位、全螢幕、小地圖、列印、客製選單 Javascript，XML轉JSON OSM+Leaflet學習筆記2：移動中心點、抓目前地點 OSM+Leaflet學習筆記1：建地圖、marker、事件、換圖層 製作一個Hugo+TailwindCSS初始檔 大家都在看Google表單，輸入ID後自動帶入其它欄位資料WebSocket基本介紹及使用筆記Word、Excel合併列印功能使用筆記GoogleMapsAPI學習筆記-1：地圖、標記、客製樣式Google表單，提交後系統自動寄送回覆通知emailVue.js3CompositionAPI基本學習筆記-1：Ref、Props、watch、生命週期LIFFv2基本使用筆記及範例D3.js、Vue畫一個台灣地圖 請作者一杯咖啡？ 寫文章需要咖啡提神，回答問題需要時間及心力。

如果覺得本站文章對工作有幫助、技術有進步，或是問題有得到解答，歡迎請本站喝杯咖啡。

中杯60元、大杯90元，加碼特大杯120元。

你請的每一杯咖啡，對本站來說都是莫大鼓勵:) 請喝咖啡（台灣）Buymeacoffee（Foreign） Y**g 哈*哈**啦 M** L**ce**tT***g H**l*y He**y 小*瓜 ki*******37 A**y S**Y**C** R****_L** I**n M******C**u R***y 曾* M** L**O 放個廣告賺點養主機的$$，謝謝 Let’sWrite來訪人數 位大大相挺，謝謝。

（如何製作來訪人數？） 訂閱新文章通知 直接加入Telegram的頻道，有最新文章時會收到廣播通知： DMCAProtection放個廣告賺點養主機的$$，謝謝 Let'sWrite 前端工程師August的學習筆記—solvingproblems,insimpleways. API Front-End Google Bot Vue PWA WordPress Followus FB Telegram GitHub IG Twitter 網站地圖 隱私權政策 RSS [email protected]（金流驗證用） 請喝咖啡（台灣） Buymeacoffee（Foreign）