遷移至 Route 類別

Maps JavaScript API 的新版 Routes Library 包含 Route 類別,可取代舊版路線規劃服務。本頁說明舊版 Directions 服務與新版 Route 類別之間的差異,並提供一些程式碼供您比較。

路線規劃服務 (舊版) 與 Route 類別 (Beta 版)

要求參數

下表比較了舊版 Directions 服務和 Route 類別的要求參數。

Directions Service (Legacy) Route (Beta 版)
DirectionsService.route() 方法 Route.computeRoutes() 方法

必要參數

origin origin
destination destination
travelMode travelMode (選填)

選用參數

optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerriesavoidHighwaysavoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

方法比較

下表比較舊版 Directions 服務和 Route 類別的主要方法。

Directions Service (Legacy) Route (Beta 版)
route() 方法 computeRoutes() 方法
DirectionsRenderer.setDirections() 方法 createPolylines() 方法createWaypointAdvancedMarkers() 方法

程式碼比較

本節會比較兩段類似的程式碼,說明舊版 Directions 服務與新版 Route 類別之間的差異。程式碼片段會顯示各個 API 傳送路線要求時所需的程式碼,然後使用結果在地圖上繪製折線和標記。

在舊版路線規劃服務中,DirectionsRenderer 物件用於顯示折線和標記,代表地圖上的路線規劃結果。在 Routes 程式庫中,DirectionsRenderer 物件已由 createPolylines()createWaypointAdvancedMarkers() 方法取代。本頁面說明舊版 Directions Service 與新版 Route 類別之間的差異,並提供一些程式碼以供比較。

規劃行車路線

路線規劃服務 (舊版)

下列程式碼會使用舊版 Directions 服務取得行車路線,然後使用 DirectionsRenderer 在地圖上繪製折線和標記:

// Define a simple request.
var request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING'
};
// Call the Directions Service to get the directions.
directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsRenderer.setDirections(result); // Add polyline and markers to the map.
  }
});

路線類別 (Beta 版)

下列程式碼會使用新的 Route 類別取得行車路線,然後使用 createPolylines 方法在地圖上繪製折線,並使用 createWaypointAdvancedMarkers 方法在地圖上繪製標記。

新的 Route 類別不會自動算繪標記。您必須呼叫 createWaypointAdvancedMarkers 才能算繪標記。

// Define a simple request.
const request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING',
  fields: ['path', 'legs'], // Request fields needed to draw polylines.
};

// Call computeRoutes to get the directions.
const {routes} = await Route.computeRoutes(request);

// Use createPolylines to create a polyline for the route.
mapPolylines = routes[0].createPolylines();
// Add polylines to the map
mapPolylines.forEach((polyline) => polyline.setMap(map));

// Create markers to start and end points.
const markers = await routes[0].createWaypointAdvancedMarkers();
// Add markers to the map
markers.forEach((marker) => marker.setMap(map));