Yeni oluşturma yöntemlerine geçiş

Bu kılavuzda, Route sınıfı için yeni oluşturma yöntemlerine nasıl geçeceğiniz gösterilmektedir. Yol Tarifi Hizmeti'nde (Eski) oluşturma yöntemleri DirectionsRenderer sınıfının bir parçasıydı. Rota sınıfı (Beta), iki yeni oluşturma yöntemi sunar: createPolylines ve createWaypointAdvancedMarkers.

Eski DirectionsRenderer

Yol Tarifi Hizmeti'nde (Eski) oluşturma yöntemleri DirectionsRenderer sınıfının bir parçasıydı. DirectionsRenderer sınıfı, çoklu çizginin, ilişkili işaretçilerin ve adımların metin olarak gösterilmesini sağlar. Bu sınıfın aşağıdaki yöntemleri vardır:

• setDirections(): Sağlanan yol tarifi yanıtını oluşturur.
• setMap() - Yol tarifi yanıtının oluşturulacağı haritayı ayarlar.
• setPanel(): Yol tariflerini bir panelde metin adımları şeklinde gösterir.

Aşağıdaki örnekte, haritada yol tariflerini oluşturmak için DirectionsRenderer sınıfının nasıl kullanılacağı gösterilmektedir.

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 sınıfı (Beta)

Rota sınıfı (Beta), eski DirectionsRenderer sınıfı yöntemlerinin yerini alan aşağıdaki yeni oluşturma yöntemlerini sağlar:

• createPolylines
• createWaypointAdvancedMarkers

Route sınıfında, eski DirectionsRenderer sınıfındaki setPanel() yöntemine eşdeğer bir yöntem yoktur. Metin adımlarının gösterilmesi için HTML öğelerini manuel olarak oluşturup DOM'a eklemeniz gerekir. Aşağıdaki örnekte, Route sınıfı kullanılarak bir haritada yol tariflerinin nasıl oluşturulacağı ve metin adımlarını görüntülemek için HTML öğelerinin nasıl manuel olarak oluşturulacağı gösterilmektedir.

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();