نقل البيانات إلى فئة Route

المطوّرون في المنطقة الاقتصادية الأوروبية

تتضمّن مكتبة Routes الجديدة في Maps JavaScript API الفئة Route التي تحلّ محل خدمة Directions القديمة. توضّح هذه الصفحة الاختلافات بين خدمة الاتجاهات القديمة وفئة 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

مقارنة الطرق

يقارن الجدول التالي بين الطرق الرئيسية لخدمة Directions القديمة وفئة Route.

خدمة "الاتجاهات" (الإصدار القديم) Route
طريقة route() طريقة computeRoutes()
طريقة DirectionsRenderer.setDirections() createPolylines() method, createWaypointAdvancedMarkers() method

مقارنة الرموز

يقارن هذا القسم بين جزأين متشابهَين من الرمز لتوضيح الاختلافات بين خدمة Directions القديمة وفئة Route الجديدة. تعرض مقتطفات الرموز البرمجية الرمز المطلوب في كل واجهة برمجة تطبيقات لإجراء طلب للحصول على اتجاهات، ثم استخدام النتيجة لرسم خط متعدد الأضلاع وعلامات على الخريطة.

في خدمة "الاتجاهات" القديمة، يتم استخدام الكائن 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: 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;
});