העברה אל מחלקת Route

מפתחים באזור הכלכלי האירופי (EEA)

ספריית המסלולים החדשה, Maps JavaScript API כוללת את המחלקה Route, שמחליפה את הגרסה הקודמת של שירות המסלולים. בדף הזה מוסבר על ההבדלים בין שירות הניווט מהדור הקודם לבין המחלקה החדשה Route, ומוצג קוד להשוואה.

שירות Directions (מאמר מדור קודם) לעומת מחלקת Route

פרמטרים של בקשה

בטבלה הבאה מוצגת השוואה בין פרמטרי הבקשה של שירות הניווט הקודם לבין המחלקה Route.

Directions Service (Legacy) 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.

Directions Service (Legacy) Route
route() method computeRoutes() method
DirectionsRenderer.setDirections() method createPolylines() method, createWaypointAdvancedMarkers() method

השוואת קוד

בקטע הזה מוצגות שתי דוגמאות דומות של קוד כדי להמחיש את ההבדלים בין שירות הניווט מהדור הקודם לבין המחלקה החדשה 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 כדי לשרטט קו פוליגוני במפה, ובשיטה 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