Google Maps API:同一张地图上的多个方向/路线

2024-03-28

我在同一个 Google 地图上显示多条路线时遇到问题。

我有一个从我的控制器获得的位置列表(以这种形式)。

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
     0:
     arriveeLat: 48.784
     arriveeLng: 2.40735
     departLat: 48.9016
     departLng: 2.29873

我想让所有路线都显示在同一张地图上。目前只显示一个(可能是最后一个)

var map;
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
    directionsDisplay.setMap(map);



  var listPos = <?php echo json_encode($listPos); ?>;

  for (var i = 0; i < listPos.length; i++) {

    var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
    var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);

    calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);

  }

}


  function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint) {
    directionsService.route({
      origin: startPoint,
      destination: endPoint,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {

        directionsDisplay.setDirections(response);
      } else {
        window.alert('Impossible d afficher la route ' + status);
      }
    });
  }

如果您想在 Google Maps Javascript API v3 地图上显示 DirectionService 的多个响应,您需要创建一个方向渲染器 https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRenderer对于您想要显示的每条路线:

for (var i = 0; i < listPos.length; i++) {
  var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
  var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
  var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
  calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);
}

(注意:如果您想稍后对路线进行任何操作,例如隐藏它们,您将需要保留对 DirectionsRenderer 对象的引用以供以后使用)。

概念证明小提琴 http://jsfiddle.net/geocodezip/3bfjorsL/3/

代码片段:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<div id="output"></div>
<div id="map"></div>
<script>
  var map;

  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });

    var listPos = [{
        arriveeLat: 48.784,
        arriveeLng: 2.2743419,
        departLat: 48.9016,
        departLng: 2.29873
      },
      {
        arriveeLat: 48.8245306,
        arriveeLng: 2.40735,
        departLat: 48.799815,
        departLng: 2.257289
      },
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < listPos.length; i++) {

      var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
      var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        preserveViewport: true
      });
      calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint, bounds);
    }

  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint, bounds) {
    directionsService.route({
      origin: startPoint,
      destination: endPoint,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        bounds.union(response.routes[0].bounds);
        map.fitBounds(bounds);
      } else {
        window.alert('Impossible d afficher la route ' + status);
      }
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Maps API:同一张地图上的多个方向/路线 的相关文章

随机推荐