Question

在创建具有多个纬度和经度的路线图时遇到了问题，我尝试了很多方法来创建路线图，但是我仅获得标记位置，它不是地图上两个标记之间的显示路线。我需要在地图上的两个标记之间进行路由，以实现多个纬度和经度，我已经在我尝试过的代码下面发布了

var MapPoints ='[{“ address”：{“ lat”：“ 23.7012517”，“ lng”：“ 86.0591489”}，“ title”：“ Dalmia Cement，JHARKHAND”}，{“ address”：{“ lat“：” 24.5246“，” lng“：” 84.2845“}，” title“：” NAVIN CEMENT STORE“}，{” address“：{” lat“：” 24.2493788“，” lng“：” 83.9261005“}， “ title”：“ SAKSHI TRADERS”}]';

      var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
          var pointA = new google.maps.LatLng(23.7012517, 86.0591489);
        if (jQuery('#map').length > 0) {
            map = new google.maps.Map(document.getElementById('map'), {
                 zoom: 15,
                center: pointA,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false 
              });

            directionsDisplay = new google.maps.DirectionsRenderer({
                map: map,
                suppressMarkers: true
              });
          var locations = jQuery.parseJSON(MapPoints);


          directionsDisplay.setMap(map);

          var infowindow = new google.maps.InfoWindow();
          var shippingCoordinates = [];
          var bounds = new google.maps.LatLngBounds();

          for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng),
              map: map
            });
            shippingCoordinates.push(marker.getPosition());
            bounds.extend(marker.position);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                infowindow.setContent(locations[i]['title']);
                infowindow.open(map, marker);
              }
            })(marker, i));
          }

          map.fitBounds(bounds);

          // directions service configuration
          var start = shippingCoordinates[0];
          var end = shippingCoordinates[shippingCoordinates.length - 1];
          var waypts = [];
          for (var i = 1; i < shippingCoordinates.length - 1; i++) {
            waypts.push({
              location: shippingCoordinates[i],
              stopover: true
            });
          }
          finalRootMap(start, end, waypts);
        }
      }

      function finalRootMap(start, end, waypts) { 
        var request = {
          origin: start,
          destination: end,
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions_panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
              summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
              summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
              summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
            }
          }
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

使用Directions Waypoints

引用https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

var waypts = [];

for (i = 0; i < locations.length; i++) {    
     waypts.push({
        location: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng),
        stopover: true
     });
}

directionsService.route({
  origin: new google.maps.LatLng(locations[0].address.lat, locations[0].address.lng),
  destination: new google.maps.LatLng(locations[locations.length - 1].address.lat, locations[locations.length - 1].address.lng),
  waypoints: waypts,
  optimizeWaypoints: true,
  travelMode: 'DRIVING'
}, function(response, status) {
  if (status === 'OK') {
    directionsDisplay.setDirections(response);
    var route = response.routes[0];
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});

如何使用JavaScript在地图中显示两个制造商之间的路线

1 个答案: