نقل البيانات إلى طرق العرض الجديدة

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

يوضّح لك هذا الدليل كيفية نقل البيانات إلى طرق العرض الجديدة لفئة "المسار". في خدمة "خرائط Google" (الإصدار القديم)، كانت طرق العرض جزءًا من الفئة DirectionsRenderer. توفّر فئة Route (إصدار تجريبي) طريقتَين جديدتَين للعرض، هما createPolylines وcreateWaypointAdvancedMarkers.

DirectionsRenderer القديم

في خدمة "خرائط Google" (الإصدار القديم)، كانت طرق العرض جزءًا من الفئة DirectionsRenderer. يتولّى الصف DirectionsRenderer عرض الخط المتعدد الأضلاع وأي علامات مرتبطة به، بالإضافة إلى العرض النصي للخطوات، ويتضمّن الطرق التالية:

  • ‫setDirections(): تعرض هذه السمة الردّ على طلب الاتجاهات المقدَّم.
  • setMap(): يضبط الخريطة التي سيتم عرض ردّ الاتجاهات عليها.
  • setPanel(): تعرض هذه السمة الاتجاهات كسلسلة من الخطوات النصية في لوحة.

يوضّح المثال التالي كيفية استخدام الفئة DirectionsRenderer لعرض الاتجاهات على خريطة. 

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  // Set the map on the directions renderer.
  directionsRenderer.setMap(map);
  // Set the panel to display the directions as a series of textual steps.
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  // Call the directions service to get the directions.
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      // Render the polyline and markers on the map.
      directionsRenderer.setDirections(response);
    }
  });
}

الصف Route (إصدار تجريبي)

توفّر فئة Route (إصدار تجريبي) طرق العرض الجديدة التالية التي تحلّ محل طرق فئة DirectionsRenderer القديمة:

  • createPolylines
  • createWaypointAdvancedMarkers

لا تتضمّن الفئة Route أي عنصر مكافئ للطريقة setPanel() في الفئة القديمة DirectionsRenderer. لعرض الخطوات النصية، عليك إنشاء عناصر HTML يدويًا وإدراجها في DOM. يوضّح المثال التالي كيفية عرض الاتجاهات على خريطة باستخدام فئة Route، وكيفية إنشاء عناصر HTML يدويًا لعرض الخطوات النصية. 

let map;
let mapPolylines = [];
let markers = [];
let center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function initMap() {
  // Request the needed libraries.
  const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
  const { Route } = await google.maps.importLibrary('routes') as google.maps.Routes;

  map = new Map(document.getElementById("map"), {
    zoom: 12,
    center,
    mapTypeControl: false,
    mapId: 'DEMO_MAP_ID',
  });

  // Define a simple directions request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['legs'],
  };

  // Call computeRoutes to get the directions.
  const { routes } = 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));
  
  fitMapToPath(routes[0].path);

  // Add markers to start and end points.
  const markers = await routes[0].createWaypointAdvancedMarkers({map});
  

  // Render navigation instructions.
  const directionsPanel = document.getElementById("directions-panel");

  if (!routes || routes.length === 0) {
    if (directionsPanel) {
      directionsPanel.textContent = "No routes available.";
    }
  }

  const route = routes[0];
  if (!route.legs || route.legs.length === 0) {
    if (directionsPanel) {
      directionsPanel.textContent = "The route has no legs.";
    }
    return;
  }

  const fragment = document.createDocumentFragment();

  route.legs.forEach((leg, index) => {
    const legContainer = document.createElement("div");
    legContainer.className = "directions-leg";
    legContainer.setAttribute("aria-label", `Leg ${index + 1}`);

    // Leg Title
    const legTitleElement = document.createElement("h3");
    legTitleElement.textContent = `Leg ${index + 1} of ${route.legs.length}`;
    legContainer.appendChild(legTitleElement);

    if (leg.steps && leg.steps.length > 0) {
      // Add steps to an ordered list
      const stepsList = document.createElement("ol");
      stepsList.className = "directions-steps";

      leg.steps.forEach((step, stepIndex) => {
        const stepItem = document.createElement("li");
        stepItem.className = "direction-step";
        stepItem.setAttribute("aria-label", `Step ${stepIndex + 1}`);

        // Maneuver
        if (step.maneuver) {
          const maneuverNode = document.createElement("p");
          maneuverNode.textContent = step.maneuver;
          maneuverNode.className = "maneuver";
          stepItem.appendChild(maneuverNode);
        }

        // Distance and Duration
        if (step.localizedValues) {
          const distanceNode = document.createElement("p");
          distanceNode.textContent = `${step.localizedValues.distance} (${step.localizedValues.staticDuration})`;
          distanceNode.className = "distance";
          stepItem.appendChild(distanceNode);
        }

        // Instructions
        if (step.instructions) {
          const instructionsNode = document.createElement("p");
          instructionsNode.textContent = step.instructions;
          instructionsNode.className = "instruction";
          stepItem.appendChild(instructionsNode);
        }

        stepsList.appendChild(stepItem);
      });
      legContainer.appendChild(stepsList);
    }

    fragment.appendChild(legContainer);
    directionsPanel?.appendChild(fragment);
  });
  
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
  const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
  const bounds = new LatLngBounds();
  path.forEach((point) => {
    bounds.extend(point);
  });
  map.fitBounds(bounds);
}

initMap();