javascript - 在 Google Maps Javascript API 中显示多个方向

Question

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

PS：我已经搜索了 StackOverflow，但我找到了仅适用于旧 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>

标签： javascriptgoogle-mapsgoogle-maps-api-3

Answer 1

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

相关问题：Google Maps API：同一张地图上的多个方向/路线

DirectionsRenderer最简单的修复，每次调用函数时创建一个新对象calculateRoute（如果您需要更改路由或稍后隐藏它们，您将需要保留对这些 `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);
        }
    });   
}

概念证明小提琴

代码片段：

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>