遷移至 Route 類別

歐洲經濟區 (EEA) 開發人員

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
avoidFerries、avoidHighways、avoidTolls 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 才能算繪標記。

TypeScript

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

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

// Use createPolylines to create polylines 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));
index.ts

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
// Call computeRoutes to get the directions.
const { routes, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
// Use createPolylines to create polylines 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));
index.js