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

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

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

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

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

บริการเส้นทาง (เดิม) Route (เบต้า)
DirectionsService.route() method Route.computeRoutes() method

พารามิเตอร์ที่จำเป็น
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() method computeRoutes() method
DirectionsRenderer.setDirections() method createPolylines() เมธอด createWaypointAdvancedMarkers() เมธอด

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

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

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

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

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

โค้ดต่อไปนี้จะรับเส้นทางการขับรถโดยใช้บริการเส้นทางเดิม จากนั้นใช้ 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.
  }
});

คลาสเส้นทาง (เบต้า)

โค้ดต่อไปนี้จะรับเส้นทางการขับรถโดยใช้คลาส 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