به روش های رندر جدید مهاجرت کنید

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

این راهنما به شما نشان می‌دهد که چگونه به متدهای رندر جدید برای کلاس Route مهاجرت کنید. در سرویس Directions (Legacy)، متدهای رندر بخشی از کلاس DirectionsRenderer بودند. کلاس Route دو متد رندر جدید ارائه می‌دهد: createPolylines و createWaypointAdvancedMarkers .

DirectionsRenderer قدیمی

در سرویس Directions (Legacy)، متدهای رندرینگ بخشی از کلاس 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();