如何使用JavaScript在地图中显示两个制造商之间的路线 [英] How to display route between two makers in map using javascript

问题描述

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

I have facing problem while creating route map with multiple Latitude and Longitude , I tried lot of ways for creating route map but I am getting marker places only, it is not display route between two markers on map. I need to route between two markers on map for multiple Latitude and Longitude, I have posted below code which i tried ,

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

推荐答案

使用Directions Waypoints

参考 https://developers.google.com/maps/文档/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在地图中显示两个制造商之间的路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！