在 Google 地图中显示多个方向 Javascript API

Question

我想在一张地图上显示多个方向。在下面的代码中，我试图声明其中两个，但 Google 显示了一个包含所有点的单一路径。我怎样才能把它们分开？另外，我可以为每个方向设置不同的颜色吗？

PS：我搜索了 Whosebug，但我找到的解决方案仅适用于较旧的 API 版本。

<script>
    function initMap() {

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

        var mapCenter = new google.maps.LatLng(46.499729, 26.647089);
        var mapOrigin1 = new google.maps.LatLng(46.596652, 26.812765);
        var mapDestination1 = new google.maps.LatLng(46.4674824,26.4513263);
        var mapOrigin2 = new google.maps.LatLng(46.5476592,26.515106);
        var mapDestination2 = new google.maps.LatLng(46.4444641,27.362008);

        var mapOptions = {
            zoom: 14,
            center: mapCenter
        }

        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsDisplay.setMap(map);

        function calculateRoute(mapOrigin, mapDestination) {
            var request = {
                origin: mapOrigin,
                destination: mapDestination,
                travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
                if (status == "OK") {
                    directionsDisplay.setDirections(result);
                }
            });   
        }
        calculateRoute(mapOrigin1, mapDestination1);
        calculateRoute(mapOrigin2, mapDestination2);

    }
</script>

Answer 1

使用单独的 DirectionsRenderer 个对象（每条路线一个）。

function initMap() {

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

  var mapCenter = new google.maps.LatLng(46.499729, 26.647089);
  var mapOrigin1 = new google.maps.LatLng(46.596652, 26.812765);
  var mapDestination1 = new google.maps.LatLng(46.4674824, 26.4513263);
  var mapOrigin2 = new google.maps.LatLng(46.5476592, 26.515106);
  var mapDestination2 = new google.maps.LatLng(46.4444641, 27.362008);

  var mapOptions = {
    zoom: 14,
    center: mapCenter
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  function calculateRoute(mapOrigin, mapDestination) {
  
    var directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    });
    
    var request = {
      origin: mapOrigin,
      destination: mapDestination,
      travelMode: 'DRIVING'
    };
    
    directionsService.route(request, function(result, status) {
      if (status == "OK") {
        directionsDisplay.setDirections(result);
      }
    });
  }
  
  calculateRoute(mapOrigin1, mapDestination1);
  calculateRoute(mapOrigin2, mapDestination2);
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 2

要在地图上显示多条路线，您需要多个 DirectionRenderer 个对象。

相关问题：

最简单的修复，每次调用 calculateRoute 函数时创建一个新的 DirectionsRenderer 对象（如果您以后需要更改路由或隐藏它们，您将需要保留对这些的引用 ` DirectionRenderer1 个对象）。

function calculateRoute(mapOrigin, mapDestination) {
    var request = {
        origin: mapOrigin,
        destination: mapDestination,
        travelMode: 'DRIVING'
    };
    directionsService.route(request, function(result, status) {
        if (status == "OK") {
            var directionsDisplay = new google.maps.DirectionsRenderer({map:map});
            directionsDisplay.setDirections(result);
        }
    });   
}

proof of concept fiddle

代码片段：

function initMap() {

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

  var mapCenter = new google.maps.LatLng(46.499729, 26.647089);
  var mapOrigin1 = new google.maps.LatLng(46.596652, 26.812765);
  var mapDestination1 = new google.maps.LatLng(46.4674824, 26.4513263);
  var mapOrigin2 = new google.maps.LatLng(46.5476592, 26.515106);
  var mapDestination2 = new google.maps.LatLng(46.4444641, 27.362008);

  var mapOptions = {
    zoom: 14,
    center: mapCenter
  }

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  function calculateRoute(mapOrigin, mapDestination) {
    var request = {
      origin: mapOrigin,
      destination: mapDestination,
      travelMode: 'DRIVING'
    };
    directionsService.route(request, function(result, status) {
      if (status == "OK") {
        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map
        });
        directionsDisplay.setDirections(result);
      }
    });
  }
  calculateRoute(mapOrigin1, mapDestination1);
  calculateRoute(mapOrigin2, mapDestination2);

}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

在 Google 地图中显示多个方向 Javascript API

Display multiple directions in Google Maps Javascript API

javascript

google-maps

google-maps-api-3