ย้ายข้อมูลไปยังคลาสเส้นทาง

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

Routes Library ใหม่ใน Maps JavaScript API มีคลาส Route ซึ่งจะมาแทนที่บริการเส้นทางเดิม หน้านี้อธิบายความแตกต่างระหว่างบริการเส้นทางแบบเดิมกับคลาส Route ใหม่ และแสดงโค้ดบางส่วนเพื่อใช้เปรียบเทียบ

บริการเส้นทาง (เดิม) กับคลาสเส้นทาง

พารามิเตอร์คำขอ

ตารางต่อไปนี้จะเปรียบเทียบพารามิเตอร์คำขอสำหรับบริการเส้นทางเดิมและคลาส Route

บริการเส้นทาง (เดิม) Route
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

การเปรียบเทียบวิธีการ

ตารางต่อไปนี้จะเปรียบเทียบวิธีการหลักๆ สำหรับบริการเส้นทางเดิมและคลาส Route

บริการเส้นทาง (เดิม) Route
route() เมธอด computeRoutes() เมธอด
DirectionsRenderer.setDirections() เมธอด createPolylines() method createWaypointAdvancedMarkers() method

การเปรียบเทียบโค้ด

ส่วนนี้จะเปรียบเทียบโค้ด 2 ส่วนที่คล้ายกันเพื่อแสดงความแตกต่างระหว่างบริการเส้นทางเดิมกับคลาส Route ใหม่ ข้อมูลโค้ดแสดงโค้ด ที่จำเป็นใน API แต่ละรายการเพื่อสร้างคำขอเส้นทาง จากนั้นใช้ผลลัพธ์เพื่อวาด เส้นหลายเส้นและเครื่องหมายบนแผนที่

ในบริการเส้นทางเดิม ระบบจะใช้ออบเจ็กต์ DirectionsRenderer เพื่อแสดงเส้นหลายเส้นและเครื่องหมายเพื่อแสดงผลลัพธ์เส้นทางบนแผนที่ ใน คลังเส้นทาง เราได้แทนที่ออบเจ็กต์ DirectionsRenderer ด้วย เมธอด createPolylines() และ createWaypointAdvancedMarkers() หน้านี้จะอธิบายความแตกต่างระหว่างบริการเส้นทางแบบเดิมกับ Route คลาสใหม่ รวมถึงแสดงโค้ดบางส่วนเพื่อเปรียบเทียบ

ขอเส้นทางการขับขี่

บริการเส้นทาง (เดิม)

โค้ดต่อไปนี้จะรับเส้นทางการขับรถโดยใช้บริการเส้นทางเดิม จากนั้นใช้ DirectionsRenderer เพื่อวาด Polyline และเครื่องหมายบนแผนที่ 

// 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.
  }
});

ระดับชั้นของเส้นทาง

โค้ดต่อไปนี้จะรับเส้นทางการขับรถโดยใช้คลาส Route ใหม่ จากนั้น จะใช้เมธอด createPolylines เพื่อวาด Polyline บนแผนที่ และเมธอด 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