2014-10-25

[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-solverOptiMap

5 則留言:

  1. 非常好用~
    請教一個問題
    如果 只要單程~是否可以提供一指點一下
    感謝幫忙
    lincyi@seed.net.tw

    回覆刪除
    回覆
    1. "開始計算最佳路徑"的按鈕所呼叫的 directions(),第一個參數0代表計算回程,0以外的數字都是計算單程。

      刪除
  2. 您好,請問還有此範例的檔案嗎?謝謝!

    回覆刪除