ย้ายข้อมูลไปยังวิธีการแสดงผลใหม่

นักพัฒนาแอปในเขตเศรษฐกิจยุโรป (EEA)

คู่มือนี้แสดงวิธีย้ายข้อมูลไปยังวิธีการแสดงผลใหม่สำหรับคลาสเส้นทาง ในบริการเส้นทาง (เดิม) วิธีการแสดงผลเป็นส่วนหนึ่งของคลาส DirectionsRenderer คลาสเส้นทาง (เบต้า) มีวิธีการแสดงผลใหม่ 2 วิธี ได้แก่ createPolylines และ createWaypointAdvancedMarkers

DirectionsRenderer รุ่นเดิม

ในบริการเส้นทาง (เดิม) วิธีการแสดงผลเป็นส่วนหนึ่งของคลาส 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 (เบต้า)

คลาสเส้นทาง (เบต้า) มีวิธีการแสดงผลใหม่ต่อไปนี้ ซึ่งจะแทนที่วิธีการของคลาส 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();