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

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() เมธอด createWaypointAdvancedMarkers() เมธอด

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

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

ในบริการเส้นทางเดิม ระบบจะใช้ออบเจ็กต์ DirectionsRenderer เพื่อแสดง Polyline และเครื่องหมายเพื่อแสดงผลลัพธ์เส้นทางบนแผนที่ ใน คลังเส้นทาง เราได้แทนที่ออบเจ็กต์ 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 เพื่อแสดงเครื่องหมาย 

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