路線規劃服務

總覽

您可以使用 DirectionsService 物件來計算路線 (使用各種交通方式)。這個物件會與 Google Maps API 路線規劃服務通訊,以便接收路線規劃要求並傳回有效的路徑。交通時間是最佳化的主要因素,但系統也會考量距離、轉彎次數等其他因素。您可以自行處理這些路線結果或使用 DirectionsRenderer 物件來轉譯結果。

在路線要求中指定目的地或目的地時,您可以指定查詢字串 (例如「Chicago, IL」或「Darwin, NSW, Australia」),LatLng 值或「Place」物件。

路線規劃服務可透過一系列路線控點傳回多部分路線。路線會在地圖上以折線繪製路線,或是在 <div> 元素中以一系列文字說明的形式呈現 (例如,「向右轉至威廉斯堡橋坡」)。

開始

使用 Maps JavaScript API 的路線規劃服務之前,請先確認您已在針對 Maps JavaScript API 相同的專案中啟用 Google Cloud Console 中的 Directions API。

如要查看已啟用的 API 清單,請按照下列步驟操作:

  1. 前往 Google Cloud 控制台
  2. 按一下「選取專案」按鈕,然後選取您為 Maps JavaScript API 設定的專案,然後按一下「開啟」
  3. 資訊主頁的 API 清單中,尋找 Directions API
  4. 如果在清單中看到該 API,就表示一切就緒。如果「沒有」看到這個 API,請按照下列步驟進行啟用:
    1. 選取頁面頂端的「啟用 API」,即會顯示「資料庫」分頁。或者,您也可以從左側選單中選取「程式庫」
    2. 搜尋 Directions API,然後從結果清單中選取 API。
    3. 選取「啟用」。程序完成之後,Directions API 就會顯示在資訊主頁的 API 清單中。

定價和政策

定價

自 2018 年 7 月 16 日起,地圖介面集、路徑介面集和地點介面集採用新的「即付即用」定價方案,如要進一步瞭解 JavaScript Directions 服務適用的新定價和用量限制,請參閱 Directions API 的使用量和計費

政策

路線規劃服務的使用方式應遵循 Directions API 所述的政策

路線規劃要求

由於 Google Maps API 必須呼叫外部伺服器,因此存取路線服務的方式並非同步。基於這個理由,您必須傳遞在完成要求後執行的「回呼」方法。這個回呼方法會處理結果。請注意,路線規劃服務可能會以多個 routes[] 陣列的形式傳回多個可能的行程。

如要在 Maps JavaScript API 中使用路線,請建立 DirectionsService 類型的物件並呼叫 DirectionsService.route(),以向路線規劃服務發出要求,並將包含輸入字詞和回呼方法的 DirectionsRequest 物件常值傳送至回應,以便在收到回應時執行。

DirectionsRequest 物件常值包含下列欄位:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

這些欄位的說明如下:

  • origin (必填) 用來指定計算路線的起點位置。這個值可以是 String (例如「Chicago, IL」)、LatLng 值或 Place 物件。如果您使用 Place 物件,可以指定地點 ID、查詢字串或 LatLng 位置。您可以從 Maps JavaScript API 中的 Geocoding、Place Search 和 Place Autocomplete 服務擷取地點 ID。如需使用「地點自動完成」中的地點 ID 範例,請參閱地點自動完成和路線
  • destination (必填) 用來指定計算路線的終點位置。選項與上述 origin 欄位相同。
  • travelMode (必填) 指定計算路線時使用的交通方式。如需有效值,請參閱下方的交通方式
  • transitOptions (自選):指定的值只適用於 travelModeTRANSIT 的要求。如需有效值說明,請參閱下文的大眾運輸選項
  • drivingOptions (自選):指定的值只適用於 travelModeDRIVING 的要求。如需有效值說明,請參閱下文的駕駛選項
  • unitSystem (選用) 指定顯示結果時要使用的單位系統。有效值請參閱下方的單位系統

  • waypoints[] (選用) 指定 DirectionsWaypoint 的陣列。路線控點會透過指定位置轉送路線來修改路徑。路線控點指定為物件常值,欄位如下所示:

    • location 將路線控點的位置指定為 LatLng,作為 Place 物件,或做為進行地理編碼的 String
    • stopover 是布林值,表示路線控點是路線上的停靠站,可將路線分割為兩個路徑。

    (如要進一步瞭解路線控點,請參閱下方的在路徑中使用路線控點)。

  • optimizeWaypoints (選用) 指定使用提供的 waypoints 時,路徑可更有效率地調整路線控點,讓路徑最佳化。如果為 true,路線規劃服務會在 waypoint_order 欄位中傳回重新排序的 waypoints。詳情請參閱下方的在路徑中使用路線控點
  • provideRouteAlternatives (選用) 設為 true 時,可讓路線規劃服務在回應中提供多條替代路線。請注意,提供替代路線可能會延長伺服器的回應時間。這項功能僅適用於沒有中間路線控點的要求。
  • avoidFerries (選用) 設為 true 時,表示計算的路線應盡可能避開渡輪。
  • avoidHighways (選用) 設為 true 時,表示計算的路線應盡可能避開主要高速公路。
  • avoidTolls (選用) 設為 true 時,表示計算的路線應盡可能避開收費道路。
  • region (選用) 會指定區域代碼,指定為 ccTLD (「頂層網域」) 的雙字元值。(詳情請參閱下方的區域自訂調整)。

以下是 DirectionsRequest 範例:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

交通方式

計算路線時,您必須指定要使用的交通方式。目前支援下列交通方式︰

  • DRIVING (「預設」) 表示使用道路網路的標準行車路線。
  • BICYCLING 要求使用單車道和專用街道的單車路線。
  • TRANSIT 要求使用大眾運輸路線規劃路線。
  • WALKING 要求使用人行道與人行道的步行路線。

請參閱 Google 地圖平台涵蓋範圍詳細資料,判斷在哪個國家/地區支援路線功能。如果您要求路線的位置不支援路線類型,系統會傳回 DirectionsStatus="ZERO_RESULTS"。

注意:步行路線可能不含明確的人行道,因此如果未使用預設 DirectionsRenderer,步行路線會在 DirectionsResult 中傳回警告。

大眾運輸選項

路線規劃選項的可用交通方式會因交通方式而異。要求大眾運輸路線時,系統會忽略 avoidHighwaysavoidTollswaypoints[]optimizeWaypoints 選項。您可以透過 TransitOptions 物件常值,指定大眾運輸專屬的轉送選項。

大眾運輸路線有時效性,路線日後只會傳回一段時間。

TransitOptions 物件常值包含下列欄位:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

這些欄位的說明如下:

  • arrivalTime (自選) 會將所需的抵達時間指定為 Date 物件。如果指定抵達時間,系統就會略過出發時間。
  • departureTime (自選) 會將所需的出發時間指定為 Date 物件。如果指定 arrivalTime,系統就會略過 departureTime。如未指定 departureTimearrivalTime 的值,則會預設為現在 (也就是目前時間)。
  • modes[] (自選) 陣列包含一或多個 TransitMode 物件常值。這個欄位只有在要求包含 API 金鑰時才能加入。每個 TransitMode 都會指定偏好的交通方式。可使用的值如下:
    • BUS 表示計算出的路線應優先選擇以公車做為交通方式。
    • RAIL 表示計算出的路線應優先選擇以火車、電車、輕軌電車和地鐵做為交通方式。
    • SUBWAY 表示計算出的路線應優先選擇以地鐵做為交通方式。
    • TRAIN 表示計算出的路線應優先選擇以火車做為交通方式。
    • TRAM 表示計算出的路線應優先選擇以電車和輕軌電車做為交通方式。
  • routingPreference (自選) 會指定大眾運輸路線的偏好設定。使用這個選項時,您可以自訂調整傳回的選項,而不接受 API 選擇的預設最佳路線。這個欄位只有在要求包含 API 金鑰時才能指定。可使用的值如下:
    • FEWER_TRANSFERS 表示計算出的路線應優先選擇轉乘次數較少的選項。
    • LESS_WALKING 表示計算出的路線應優先選擇步行距離較短的選項。

以下顯示大眾運輸工具的 DirectionsRequest 範例:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

行車選項

您可以透過 DrivingOptions 物件,指定行車路線的路線選項。

DrivingOptions 物件包含下列欄位:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

這些欄位的說明如下:

  • departureTime (讓 drivingOptions 物件有效的必要欄位) 會將所需的出發時間指定為 Date 物件。這個值必須設為目前時間或未來時間,不得設為過去的時間 (API 會將所有日期轉換為世界標準時間,確保不同時區的資料能以一致的方式處理)。針對 Google 地圖平台付費方案客戶,如果在要求中加入 departureTime,API 會傳回當下預計的交通狀況時所在的最佳路線,並在回應中納入預測的流量 (duration_in_traffic)。如未指定出發時間 (也就是如果要求不包含 drivingOptions),則傳回的路徑通常是一般最佳路線,而未將流量條件納入考量。
  • trafficModel (自選) 會指定計算交通時間時要採用的假設。這項設定會影響回應中 duration_in_traffic 欄位傳回的值,其中包含根據歷來平均值預估的交通時間。預設值為 bestguess。可使用的值如下:
    • bestguess (預設) 表示傳回的 duration_in_traffic 應是最準確的預估交通時間 (根據歷來路況和即時車流量兩者的已知相關資訊計算而得)。越接近 departureTime 的即時路況,也越來越重要。
    • pessimistic 表示傳回的 duration_in_traffic 在大多數日子應該都會比實際交通時間長,但偶爾路況特別差時,實際交通時間可能會超過這個值。
    • optimistic 表示傳回的 duration_in_traffic 在大多數日子應該都會比實際交通時間短,但偶爾路況特別好時,實際交通時間可能會短於這個值。

以下是行車路線的 DirectionsRequest 範例:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

單位系統

根據預設,系統會使用起點國家/地區或區域單位的系統計算並顯示路線。(注意:使用經緯度座標 (而非地址) 表示的起點一律會預設為指標單位。例如,從「Chicago, IL」到「Toronto, ONT」的路線,會以英里顯示結果,而反向路線則以公里顯示結果。您可以在要求中使用下列其中一個 UnitSystem 值,在要求中明確設定此系統,即可覆寫此單位系統:

  • UnitSystem.METRIC 會指定使用指標系統。系統會使用公里來顯示距離。
  • UnitSystem.IMPERIAL 指定使用英制 (英文) 系統。系統會使用英里來顯示距離。

注意:此單位系統設定只會影響向使用者顯示的文字。路線規劃結果中也包含距離 (值) 以外的距離「值」

路線規劃的區域自訂調整

Google Maps API 路線規劃服務會傳回受到載入 JavaScript 啟動網域的網域 (區域或國家/地區) 影響的地址結果。(因為多數使用者會載入 https://maps.googleapis.com/,所以會將隱含網域設為美國)。如果從其他支援的網域載入啟動條件,就會得到該網域影響的結果。舉例來說,搜尋「https://maps.googleapis.com/」(美國) 的應用程式在載入「http://maps.google.es/」(西班牙) 時,可能會傳回不同的結果。

您也可以使用 region 參數,設定「路線」服務只傳回特定區域的結果。這個參數會採用指定為雙字元 (非數字) 萬國碼 (Unicode) 區域子標記的區碼。大多數情況下,這些標記直接對應至 ccTLD (「頂層網域」) 兩個字元值,例如「co.uk」的「uk」。在某些情況下,region 標記也支援 ISO-3166-1 代碼,有時也與 ccTLD 值不同 (例如「GB」代表「英國」)。

使用 region 參數時:

  • 請只指定一個國家/地區或區域。如果使用多個值,可能會遭到系統忽略,還可能導致要求失敗。
  • 請只使用雙字元區域子標記 (萬國碼 (Unicode) CLDR 格式),所有其他輸入內容都會導致錯誤。

區域偏誤僅適用於支援路線規劃的國家/地區。請參閱 Google 地圖平台涵蓋範圍詳細資料,瞭解 Directions API 的全球涵蓋率。

呈現路線

使用 route() 方法啟動傳送至 DirectionsService 的路線要求時,您必須傳遞回呼,在服務要求完成時執行。這個回呼會在回應中傳回 DirectionsResultDirectionsStatus 代碼。

路線規劃查詢狀態

DirectionsStatus 可能會傳回下列值:

  • OK 表示回應包含有效的 DirectionsResult
  • NOT_FOUND 表示在要求的出發地、目的地或路線控點中,有至少一個指定地點無法進行地理編碼處理。
  • ZERO_RESULTS 表示來源和目的地之間找不到路線。
  • MAX_WAYPOINTS_EXCEEDED 表示 DirectionsRequest 中提供的 DirectionsWaypoint 欄位過多。請參閱下文說明路線控點的限制
  • MAX_ROUTE_LENGTH_EXCEEDED 表示要求的路徑過長,因此無法處理。傳回更複雜的路線時,就會發生這個錯誤。請嘗試減少路線控點、轉向或指示的數量。
  • INVALID_REQUEST 表示提供的 DirectionsRequest 無效。造成這類錯誤代碼最常見的原因為缺少來源或目的地的要求,或是包含路線控點的大眾運輸要求。
  • OVER_QUERY_LIMIT 表示網頁在允許的時間範圍內傳送了太多要求。
  • REQUEST_DENIED 表示網頁不允許使用路線規劃服務。
  • UNKNOWN_ERROR 表示伺服器發生錯誤,因此無法處理路線要求。如果重試,要求可能會成功。

在處理結果之前,請務必檢查這個值,確保路線查詢傳回有效的結果。

顯示 DirectionsResult

DirectionsResult 包含路線查詢的結果,您可自行處理這些結果或傳送至 DirectionsRenderer 物件,該物件會自動處理在地圖上顯示結果。

如要使用 DirectionsRenderer 顯示 DirectionsResult,您必須執行下列操作:

  1. 建立 DirectionsRenderer 物件。
  2. 在轉譯器上呼叫 setMap() 即可將其繫結至傳遞的地圖。
  3. 在轉譯器上呼叫 setDirections(),並如上所述傳遞 DirectionsResult。由於轉譯器是 MVCObject,因此會自動偵測其屬性的任何變更,並在相關聯的路線發生變更時更新地圖。

以下範例針對路線 66 上的兩個位置之間計算路線,其中起點和目的地會由下拉式清單中的特定 "start""end" 值設定。DirectionsRenderer 會負責顯示指定位置之間的折線,以及起點、目的地和任何路線控點的標記位置 (如適用)。

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

在 HTML 內文中:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

查看範例

以下範例顯示使用不同交通方式,出發在加州舊金山的海洋海灘:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

在 HTML 內文中:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

查看範例

DirectionsRenderer 不僅可處理折線和任何相關聯的標記,還能以一系列步驟的形式呈現路線文字。方法是在 DirectionsRenderer 上呼叫 setPanel(),並傳遞要顯示這項資訊的 <div>。這麼做也能確保顯示正確的版權資訊,以及與結果相關的任何警告。

提供文字方向時,系統會使用瀏覽器偏好的語言設定,或是透過 language 參數載入 API JavaScript 時所指定的語言。(詳情請參閱本地化的相關說明)。如果是大眾運輸路線,時間會顯示在該大眾運輸停靠站的時區。

以下範例與上圖相同,但包含顯示路線的 <div> 面板:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

在 HTML 內文中:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

查看範例

DirectionsResult 物件

傳送路線規劃到 DirectionsService 時,您會收到回應,其中包含狀態碼和一個結果 (DirectionsResult 物件)。DirectionsResult 是具有下列欄位的物件常值:

  • geocoded_waypoints[] 包含 DirectionsGeocodedWaypoint 物件陣列,每個物件都包含起點、目的地和路線控點的詳細資訊。
  • routes[] 包含 DirectionsRoute 物件陣列。每條路線都代表從起點到目的地 DirectionsRequest 的方法。一般來說,除非要求的 provideRouteAlternatives 欄位設為 true,否則可能會傳回多條路徑,因此針對任何要求,系統只會傳回一條路線。

注意:替代路徑中已淘汰 via_waypoint 屬性。3.27 版是最後一個 API 版本,透過替代路徑新增路線控點。針對 API 3.28 以上版本,您可以停用拖曳路線的拖曳功能,以便繼續使用「路線」服務導入可拖曳的路線。 只能拖曳主要路徑。使用者可以拖曳主要路徑,直到該路徑與替代路徑相符為止。

路線編碼路線控點

DirectionsGeocodedWaypoint 包含起點、目的地和路線控點的地理編碼詳細資料。

DirectionsGeocodedWaypoint 是具有下列欄位的物件常值:

  • geocoder_status 表示地理編碼作業產生的狀態碼。 這個欄位可能包含下列值。
    • "OK" 表示沒有發生任何錯誤。地址剖析成功,且系統傳回至少一組地理編碼。
    • "ZERO_RESULTS" 表示地理編碼成功,但沒有傳回任何結果。如果地理編碼器收到不存在的 address,就有可能發生這種情況。
  • partial_match 指出地理編碼器沒有傳回與原始要求完全相符的結果,但可以比對部分要求的地址。建議您檢查原始要求,確認是否有拼寫錯誤和/或不完整的地址。

    出現部分相符結果的最常見原因,是系統在要求中傳遞的縣市內找不到街道地址。如果要求比對同一個縣市內的兩個或更多地點,也可能會傳回部分相符的結果。舉例來說,「Hillpar St, Bristol, UK」會傳回 Henry Street 和 Henrietta Street 這兩項部分相符的結果。請注意,如果要求包含拼寫錯誤的地址元件,地理編碼服務可能就會建議使用替代地址。透過這種方式觸發的建議,也會標示為部分相符。

  • place_id 是地點的專屬 ID,可與其他 Google API 搭配使用。舉例來說,您可以搭配 Google Places API 程式庫使用 place_id,以取得當地商家的詳細資料,例如電話號碼、營業時間和使用者評論等等。請參閱地點 ID 總覽
  • types[] 是一個陣列,用來傳回傳回結果的類型。這個陣列包含一組零或多個標記,用來識別結果中傳回的特徵類型。舉例來說,「Chicago」的地理編碼會傳回「locality」,代表「Chicago」代表城市,同時也傳回「political」,表示其為政治實體。

導航路線

注意:舊版 DirectionsTrip 物件已重新命名為 DirectionsRoute。請注意,現在路線是指整個起點和終點行程,而不是上層行程的一站。

DirectionsRoute 包含指定來源和目的地的單一結果。這條路線可能包含一或多個腿 (類型為 DirectionsLeg) ,視未指定任何路線控點而定。路線也包含版權和警告資訊,除了轉送資訊外,還必須向使用者顯示。

DirectionsRoute 是具有下列欄位的物件常值:

  • legs[] 包含 DirectionsLeg 物件的陣列,每個物件都含有指定路線中兩個位置的路徑路線。每個指定的路線控點或目的地都有一個獨立的腿。(沒有路線控點的路徑只會包含一個 DirectionsLeg)。每個路段是由一系列 DirectionStep 組成。
  • waypoint_order 包含一個陣列,用於表示計算的路線中任何路線控點的順序。如果 DirectionsRequest 傳遞 optimizeWaypoints: true,則此陣列包含經過修改的順序。
  • overview_path 包含 LatLng 陣列,代表所產生路線的概略 (順暢) 路徑。
  • overview_polyline 包含單一 points 物件,該物件包含路線的編碼折線表示法。這個折線是最終路線的概略 (平滑) 路徑。
  • bounds 包含 LatLngBounds,表示指定路線在折線上的邊界。
  • copyrights 包含這個路線要顯示的版權文字。
  • warnings[] 包含顯示這類路線時要顯示的警告陣列。如果您不使用我們提供的 DirectionsRenderer 物件,則必須自行處理並顯示這些警告。
  • fare 包含這個航線的總票價 (也就是車票總費用)。系統只會針對大眾運輸要求傳回這個屬性,且只有所有大眾運輸行程都能提供票價資訊的路線才會傳回該屬性。這類資訊包括:
    • currencyISO 4217 貨幣代碼,代表金額使用的貨幣。
    • value:總票價金額,以上方指定的貨幣為單位。

導航航段

注意:舊版 DirectionsRoute 物件已重新命名為 DirectionsLeg

在計算的路線中,DirectionsLeg 定義從起點到目的地的一段路線。如果路線不含路線控點,路線將包含一個單一「航線」,但針對定義一或多個路線控點的路線,路線將包含一或多條路線,對應至行程中的特定路段。

DirectionsLeg 是具有下列欄位的物件常值:

  • steps[] 包含 DirectionsStep 物件陣列,代表旅程歷程中的每個步驟相關資訊。
  • distance 表示這個腿所涵蓋的總距離,格式為 Distance

    • value 表示距離 (單位為公尺)
    • text 包含距離的字串表示法,根據預設,該屬性會按起點使用的單位顯示。(比方說,美國境內的任何起點都會使用英里數)。您可以在原始查詢中明確設定 UnitSystem,藉此覆寫這個單位系統。請注意,無論你使用的單位系統為何,distance.value 欄位一律包含以公尺為單位的值。

    如果沒有距離資訊,就無法定義這些欄位。

  • duration 表示這個腿的總時間長度,以下列格式的 Duration 物件:

    • value 代表時間長度 (以秒為單位)。
    • text 包含時間長度的字串表示法。

    如果沒有經歷時間資訊,就無法定義這些欄位。

  • duration_in_traffic 表示這個腿總長度,並將目前車流量納入考量。只有在下列所有條件均符合的情況下,系統才會傳回 duration_in_traffic

    • 要求不含中途行經點。也就是說,不包含 stopovertrue 的路線控點。
    • 該要求僅適用於行車路線,mode 設為 driving
    • departureTime 會納入要求中的 drivingOptions 欄位。
    • 要求的路線可提供路況。

    duration_in_traffic 包含下列欄位:

    • value 表示時間長度 (以秒為單位)。
    • text 包含人類可讀的時間長度。
  • arrival_time 包含這個腿的預估抵達時間。只有大眾運輸路線才會傳回這個屬性。結果會傳回為含有三個屬性的 Time 物件:
    • value 指定為 JavaScript Date 物件的時間。
    • text 指定為字串的時間。時間會以大眾運輸停靠站的時區為準。
    • time_zone 包含這個車站的時區。這個值是 IANA 時區資料庫中定義的時區名稱,例如「America/New_York」。
  • departure_time 包含這個腿的預估出發時間,指定為 Time 物件。departure_time 僅適用於大眾運輸路線。
  • start_location 包含這個腿起點的 LatLng。路線規劃服務會使用在起點和終點處最接近交通方式 (通常是道路) 來計算不同地點之間的路線,例如 start_location 可能與這個航段的起點不同 (例如某一道路不接近起點)。
  • end_location 包含這個航段目的地的 LatLng。由於 DirectionsService 會使用位於起點和終點處的交通方式 (通常是道路) 來計算位置之間的路線,因此 end_location (如果道路並非位於目的地附近),因此可能與這個腿提供的目的地不同。
  • start_address 包含這個腿起點的人類可讀地址 (通常是街道地址)。

    本內容應依原樣解讀。請勿以程式輔助方式剖析格式化的地址。
  • end_address 包含這個腿部終點可讀的地址 (通常是街道地址)。

    本內容應依原樣解讀。請勿以程式輔助方式剖析格式化的地址。

導航步驟

DirectionsStep 是方向路徑最不可部分使用的單位,其中包含單一步驟,用來說明旅程中的特定單一指令。例如:「在 W. 左轉第 4 街」這個步驟不僅會描述操作說明,也會包含與這個步驟和此步驟相關的距離和時間長度資訊。舉例來說,標示為「合併至 I-80 西區」的步驟可能包含「37 英里」和「40 分鐘」的間隔時間,表示該步驟與這個步驟相距 37 英里/40 分鐘。

使用路線規劃服務搜尋大眾運輸路線時,步數陣列會包含 transit 物件形式的其他大眾運輸特定資訊。如果路線包含多種交通方式,steps[] 陣列中會提供步行或行車步驟的詳細路線資訊。舉例來說,步行步驟會包含從起點和終點開始的路線:「步行前往 Innes Ave & amp; Fitch St」。這個步驟會在 steps[] 陣列中加入該路線的詳細步行路線,例如:「往西北角」、「左轉行駛至 Arelious Walker」,以及「向左轉入 Innes Ave」。

DirectionsStep 是具有下列欄位的物件常值:

  • instructions 包含這個步驟在文字字串中的操作說明。
  • distance 包含這個步驟涵蓋的距離,直到下一個步驟為止的 Distance 物件。(請參閱上方的 DirectionsLeg 說明)。如果距離不明,這個欄位可能就無法定義。
  • duration 包含執行這個步驟 (直到下一個步驟) 所需的預估時間,作為 Duration 物件。(請參閱上方的 DirectionsLeg 說明)。如果時間長度不明,則這個欄位可能並未定義。
  • start_location 包含此步驟起點的地理編碼 LatLng
  • end_location 包含此步驟終點的 LatLng
  • polyline 包含單一 points 物件,其中包含步驟的編碼折線表示法。此折線是步驟的概略 (平滑) 路徑。
  • steps[] DirectionsStep 物件常值,其中包含大眾運輸路線中步行或開車的詳細路線。只有大眾運輸路線才會提供子步驟。
  • travel_mode 包含這個步驟中使用的 TravelMode。大眾運輸路線可能包含步行和大眾運輸路線的組合。
  • path 包含 LatLngs 陣列,說明這個步驟的步驟。
  • transit 包含大眾運輸相關資訊,例如抵達和出發時間,以及大眾運輸路線名稱。

大眾運輸專屬資訊

大眾運輸路線會傳回與其他交通方式無關的額外資訊。這些額外屬性會透過 TransitDetails 物件公開,並以 DirectionsStep 的屬性傳回。在 TransitDetails 物件中,您可以透過下列方式存取 TransitStopTransitLineTransitAgencyVehicleType 物件的其他資訊。

大眾運輸詳細資訊

TransitDetails 物件會顯示下列屬性:

  • arrival_stop 包含 TransitStop 物件,其中包含下列屬性的抵達車站/停靠站:
    • name 轉運站的名稱。例如 「光復廣場」。
    • location 轉運站/停靠站的地點,以 LatLng 表示。
  • departure_stop 包含代表出發車站/停靠站的 TransitStop 物件。
  • arrival_time 包含抵達時間,指定為具有三個屬性的 Time 物件:
    • value 指定為 JavaScript Date 物件的時間。
    • text 指定為字串的時間。時間會以大眾運輸停靠站的時區為準。
    • time_zone 包含這個車站的時區。這個值是 IANA 時區資料庫中定義的時區名稱,例如「America/New_York」。
  • departure_time 包含出發時間,以 Time 物件指定。
  • headsign 會指定在這個路線上行駛的方向,因為標示在車輛上或出發停靠站。這通常是針對總站所提供的資訊。
  • 如果情況允許,headway 代表此時間從相同停靠站出發的預期秒數。舉例來說,如果 headway 的值為 600,則您應該錯過不到 10 分鐘的公車。
  • line 包含 TransitLine 物件常值,其中包含在這個步驟中使用的大眾運輸路線相關資訊。TransitLine 提供行的名稱和運算子,以及 TransitLine 參考說明文件中所述的其他屬性。
  • num_stops 包含這個步驟中的停靠站數量。其中包含抵達站,但不包含出發站。例如,如果您的路線涉及從 A 站出發、通過 B 和 C 停靠站,然後抵達 D 停靠站,num_stops 會傳回 3。

大眾運輸路線

TransitLine 物件會顯示下列屬性:

  • name 包含此大眾運輸路線的全名。例如「指南客運」或「台北捷運」。
  • short_name 包含這個大眾運輸路線的簡稱。通常是一個路線編號,例如「板南線」或「237」。
  • agencies 是包含單一 TransitAgency 物件的陣列。TransitAgency 物件提供這一行的運算子資訊,包括下列屬性:
    • name 包含運輸公司的名稱。
    • phone 包含運輸公司的電話號碼。
    • url 包含運輸公司的網址。

    注意:如果您要手動轉譯大眾運輸路線 (而不是使用 DirectionsRenderer 物件),就必須顯示提供行程結果的運輸公司名稱和網址。

  • url 包含這個運輸公司提供的大眾運輸路線網址。
  • icon 包含與這行相關聯的圖示網址。 大多數城市會使用按照不同車輛類型設計的通用圖示,部分大眾運輸路線 (例如紐約地鐵系統) 有該路線專屬的圖示。
  • color 包含此大眾運輸路線的招牌顏色。顏色會以十六進位字串的形式指定,例如:#FF0033。
  • text_color 包含常用於此行簽名的文字顏色。以十六進位字串的形式指定。
  • vehicle 包含包含下列屬性的 Vehicle 物件:
    • name 包含這一行的車輛名稱。例如 「捷運」。
    • type 包含這條線使用的車輛類型。如需支援值的完整清單,請參閱車輛類型說明文件。
    • icon 包含通常與這個車輛類型相關的圖示網址。
    • local_icon 包含與這個車輛類型相關聯的圖示網址 (依本地交通標語區分)。

車輛類型

VehicleType 物件會顯示下列屬性:

定義
VehicleType.RAIL 火車。
VehicleType.METRO_RAIL 輕軌電車運輸。
VehicleType.SUBWAY 地下輕軌電車。
VehicleType.TRAM 地上輕軌電車。
VehicleType.MONORAIL 單軌電車。
VehicleType.HEAVY_RAIL 重軌電車。
VehicleType.COMMUTER_TRAIN 通勤電車。
VehicleType.HIGH_SPEED_TRAIN 高速火車。
VehicleType.BUS 公車。
VehicleType.INTERCITY_BUS 城際巴士。
VehicleType.TROLLEYBUS 無軌電車。
VehicleType.SHARE_TAXI 共乘式計程車是一種公車,可以上下車載送乘客。
VehicleType.FERRY 渡輪。
VehicleType.CABLE_CAR 在電纜上運作的車輛,通常是在地面上。空中纜車的類型可能是 VehicleType.GONDOLA_LIFT
VehicleType.GONDOLA_LIFT 空中纜車。
VehicleType.FUNICULAR 一種靠電纜從陡坡往上拉升的車輛。登山纜車通常包含兩輛車,每輛車都是另一輛車的對稱。
VehicleType.OTHER 所有其他車輛都會傳回這個類型。

檢查 DirectionsResults

剖析任何路線規劃回應時,系統可能會檢查 DirectionsResults 元件 (DirectionsRouteDirectionsLegDirectionsStepTransitDetails)。

重要事項:如果您要手動轉譯大眾運輸路線 (而不是使用 DirectionsRenderer 物件),就必須顯示提供行程結果的運輸公司名稱和網址。

下方範例顯示前往紐約市特定旅遊景點的步行路線。我們會檢查路徑的 DirectionsStep 以為每個步驟新增標記,並將資訊附加至包含該步驟指示文字的 InfoWindow

注意:由於我們在計算步行路線時,也會在獨立的 <div> 面板中向使用者顯示警告。

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

在 HTML 內文中:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

查看範例

使用路線上的路點

DirectionsRequest 中所述,您也可以在使用路線規劃服務計算步行、單車或開車路線時,指定路線控點 (類型 DirectionsWaypoint)。路線控點不支援路線控點。 路線控點可讓您計算其他地點的路線,在這種情況下,傳回的路線會通過指定的路線控點。

waypoint 包含下列欄位:

  • location (必填) 指定路線控點的位址。
  • stopover (選用) 指出這個路線控點是否為路徑 (true) 上的實際停靠站,或只是想傳遞前往指定位置的偏好設定 (false)。根據預設,停靠站為 true

根據預設,路線規劃服務會依指定順序計算路線控點。如有需要,您可以在 DirectionsRequest 中傳遞 optimizeWaypoints: true,允許路線規劃服務以更有效率的順序重新安排路線控點,為路線最佳化。(這項最佳化作業適用於 旅遊銷售專員的問題。)交通時間是最佳化的主要因素,但用來判斷哪條路線的效率最好,系統也會將距離、轉彎次數等其他因素納入考量。所有路線控點都必須是「路線規劃」服務適用的停靠站,才能最佳化路線。

如果您指示路線規劃服務最佳化路線控點的順序,系統將在 DirectionsResult 物件的 waypoint_order 欄位中傳迴路線順序。

以下範例使用多個起點、終點和路線控點,計算美國各個區域的路線。(如要選取多個路線控點,請在清單中選取項目時,按下 Ctrl-Click)。請注意,我們會檢查 routes.start_addressroutes.end_address,以提供每條路線起點和終點的文字。

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;

路線控點的限制與限制

須遵守下列使用限制和限制:

  • 在 Maps JavaScript API 中使用路線服務時,最多可包含 25 個路線控點 (包含起點和目的地)。Directions API 網路服務的限制。
  • Directions API 網路服務來說,客戶可以允許 25 個路線控點、起點和目的地。
  • Google 地圖平台付費方案客戶最多可以有 25 個路線控點、起點和目的地。
  • 大眾運輸路線不支援路點。

可拖曳的路線

如果可拖曳,使用者可以透過 DirectionsRenderer 動態修改顯示的單車、步行或行車路線,讓使用者能按住並拖曳地圖上的結果路徑,來選取和修改路徑。只要將 draggable 屬性設為 true,即可指定轉譯器的螢幕是否允許拖曳路線。您無法將大眾運輸路線設定為可拖曳的路線。

可拖曳路線時,使用者可以選取算繪結果在路徑上的任一點 (或路線控點),將指定的元件移至新的位置。DirectionsRenderer 會動態更新,以顯示修改的路徑。釋出後,系統就會在地圖中加入轉場路線控點 (以小型白色標記表示)。選取及移動路徑區隔時,系統會變更路線的路段,同時選取及移動路線控點標記 (包括起點和終點) 會改變穿越該路線控點的路徑支路。

由於可拖曳的路線會經過修改及用戶端顯示,因此建議您監控並處理 DirectionsRenderer 上的 directions_changed 事件,以便在使用者修改顯示的路線時收到通知。

下列程式碼顯示從澳洲西岸的伯斯到東岸的雪梨。程式碼會監控 directions_changed 事件,以更新旅程所有腿部的總距離。

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
查看範例

查看範例