به روش‌های جدید پرداز کردن انتقال دهید

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

این راهنما به شما نشان می‌دهد که چگونه به روش‌های جدید ارائه برای کلاس Route مهاجرت کنید. In the Directions service (Legacy), the rendering methods were part of the DirectionsRenderer class. کلاس Route دو روش جدید برای رندر کردن ارائه می‌دهد: createPolylines و createWaypointAdvancedMarkers.

DirectionsRenderer قدیمی

In the Directions service (Legacy), the rendering methods were part of the DirectionsRenderer class. کلاس 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 نیست. برای نمایش مراحل نوشتاری، باید عناصر اچ‌تی‌ام‌ال را به‌طور دستی ایجاد کنید و آن‌ها را در 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');
  const { Route } = await google.maps.importLibrary('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');
  const bounds = new LatLngBounds();
  path.forEach((point) => {
    bounds.extend(point);
  });
  map.fitBounds(bounds);
}

initMap();