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

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

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

Directions Service (เดิม) กับคลาส Route

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

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

Directions Service (เดิม) 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

การเปรียบเทียบเมธอด

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

Directions Service (เดิม) Route
เมธอดroute() computeRoutes() เมธอด
DirectionsRenderer.setDirections() เมธอด createPolylines() เมธอด, createWaypointAdvancedMarkers() เมธอด

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

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

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

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

Directions Service (เดิม)

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

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

คลาส Route ใหม่จะไม่แสดงเครื่องหมายโดยอัตโนมัติ คุณต้องเรียกใช้ createWaypointAdvancedMarkers เพื่อแสดงเครื่องหมาย

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    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 } = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
if (!routes) {
    console.warn('No routes found.');
    return;
}
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.map = map;
});

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 } = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
if (!routes) {
    console.warn('No routes found.');
    return;
}
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.map = map;
});