~提姆備忘錄~: [Javascript] 透過 Google Map API 計算最佳路徑 (Fastest Roundtrip)

最近接到的一個需求，送貨員每天要送的商品很多，希望能幫助他算出今天要去的地點最佳路徑，以節省時間。

最先想到的就是 Google Map 上有這功能，所以心想佛心來的 Google 大神一定有 API 可以使用，果不其然被我找到了。

實作出來的畫面，先決定好起始位置，再選擇今天的地點：

按 [開始計算最佳路徑(含回程)] 後，地圖上會畫出路徑圖，下方也顯示相關資訊：

製作成一個簡單的範例分享，範例說明如下：

1. 先載入相關 Javascript API

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="Scripts/BpTspSolver.js"></script>
<script type="text/javascript" src="Scripts/tsp.js"></script>

2. 網頁起始時，載入 Google Map

<body onLoad="onBodyLoad()">
...
function onBodyLoad() {
 google.load("maps", "3", { callback: init, other_params: "sensor=false" });
}

function init() {
 // 將 Google Map 載到 <div id="map"> 裡.
 // 呼叫 tsp.js 的 loadAtStart(<緯度>,<經度>,<高度>).
 loadAtStart(24.1676, 120.6593 ,13);
}
...
// 放 Google Map 的 div
<div id="map" style="height: 487px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>

3. 決定起始位置，並把 Google Map 位置移到該位置，以確定地址沒問題

function clickedStartAddress() {
    var txtAddress = document.getElementById("txtAddress");
    addAddress(txtAddress.value);
}

4. 選擇要前往的地點，這裡每按一次[>>]就會記錄下地點，並把 Google Map 移到該位置，以確定地址沒問題

function clickedDestAddress() {
    var objSelect2 = document.getElementById("sleCustList2");
    addAddress(objSelect.options[I].value);
}

5. 開始計算最佳路徑，呼叫 tsp.js 的 directions(<0:>,<是否用走路的>,<是否用開車的>,<是否避開高速公路>,<是否避開收費站>)。

<input id="calcButton" type="button" value="開始計算最佳路徑(含回程)" onClick="directions(0, false, false, false, false);">

計算並取得結果是在 tsp.js 的 onSolveCallback(myTsp)，會直接將最佳路線圖套疊到 Google Map 上。除了這個，還有總時間、距離長度、以及行走順序等資訊。行走順序是將地址用分號(;)接起來的字串，只要將結果自行處理成想顯示的樣子即可。

範例下載
參考來源：google-maps-tsp-solver、OptiMap

~提姆備忘錄~

2014-10-25

[Javascript] 透過 Google Map API 計算最佳路徑 (Fastest Roundtrip)

5 則留言: