Google 地图 JavaScript API 在同一张地图上显示两条具有不同折线样式的路线

Question

我正在使用 Google 地图 JavaScript API 并希望在同一张地图上显示两条路线（每条路线具有不同的折线样式）。

第一条路线为驾驶方式，起点和终点分别为用户输入的地址和用户选择的停车库。此路线将显示为实线。

第二条路线是步行。这条路线是从停车场到同一地图上定义为 centerOfMap 的另一个静态位置。此路线将显示为带圆圈符号的虚线。

期望的输出：

// Set the driving route line

var drivingPathLine = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0,
    fillOpacity: 0
});

// Set the walking route line

var walkingLineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
};

var walkingPathLine = new google.maps.Polyline({
    strokeColor: '#0eb7f6',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: walkingLineSymbol,
        offset: '0',
        repeat: '10px'
    }],
});

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true,polylineOptions: walkingPathLine});
directionsService = new google.maps.DirectionsService;

问题是，目前代码的写法，地图上只显示了第二条路线（步行路线）。我知道我需要将折线变量和 directionsRenderer 放置在 getDirectionsHere 方法中，但不确定如何放置。任何指导表示赞赏！

如何在同一张地图上显示两条路线并为每条路线设置不同的样式（一条是实线多段线，另一条是虚线多段线）？

<!DOCTYPE html>
<html>
<body>
<style>
    
html { 
 height: 100%;
}

body { 
 height: 100%;
 margin: 0;
 padding: 0;
 font-size: 26px;
    font-family: "filson-soft";
}

#map_container {
    height: 700px;
}

#map {
 width: 100%;
 height: 100%;
 float: left;
}
    
</style>

<div id="map_container">

    <div id="map"></div>
    
</div>
      
<script>
        
        google.maps.event.addDomListener(window, "load", initMap);

        var centerOfMap;
        var geocoder;
        var map;
        var locations;
        var gmarkers = [];
        var search_lat;
        var search_lng;
        var infowindow;
        var directionsDisplay; 
        var directionsService;

        function initMap() {
            
            gmarkers = [];
            
            // Set the driving route line

            var drivingPathLine = new google.maps.Polyline({
                strokeColor: '#FF0000',
                strokeOpacity: 0,
                fillOpacity: 0
            });

            // Set the walking route line

            var walkingLineSymbol = {
                path: google.maps.SymbolPath.CIRCLE,
                fillOpacity: 1,
                scale: 3
            };

            var walkingPathLine = new google.maps.Polyline({
                strokeColor: '#0eb7f6',
                strokeOpacity: 0,
                fillOpacity: 0,
                icons: [{
                    icon: walkingLineSymbol,
                    offset: '0',
                    repeat: '10px'
                }],
            });
            
            directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true,polylineOptions: walkingPathLine});
            directionsService = new google.maps.DirectionsService;
            
            geocoder = new google.maps.Geocoder();
            
            // SET THE CENTER OF THE MAP
            
            centerOfMap = {
                lat: 38.5803844, 
                lng: -121.50024189999999
            };
            
            // ADD THE MAP AND SET THE MAP OPTIONS

            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 16,
              center: centerOfMap
            });

            var center_marker = new google.maps.Marker({
                position: centerOfMap,
                icon: 'http://maps.google.com/mapfiles/ms/micons/orange-dot.png',
                map: map
            });
                  
            center_marker.addListener('click', function() {
                
                var gOneContent =   '<div id="info_window">' +
                                    '<h2>Center Of Map</h2>' +
                                    '<div style="clear:both;height:40px;">' +
                                    '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + centerOfMap.lat + ', ' + centerOfMap.lng + ');">Get Directions</a>' +
                                    '</div>';
                
                infowindow.setContent(gOneContent);
                infowindow.open(map, center_marker);
                map.setCenter(marker.getPosition());
                
            });

            locations = [
                ["Joes Parking Garage","1001 6th St","Sacramento","CA","95814","38.58205649","-121.49857521","parking_garage"],
                ["Mikes Parking Garage","918 5th St","Sacramento","CA","95814","38.5826939","-121.50012016","parking_garage"]
            ];

            infowindow = new google.maps.InfoWindow();

            var marker, i;
            
            var bounds = new google.maps.LatLngBounds();
            
            console.log("found " + locations.length + " locations<br>");
            
            for (i = 0; i < locations.length; i++) {

                var icon_image = 'http://maps.google.com/mapfiles/ms/micons/parkinglot.png';
                
                var coordStr = locations[i][5] + "," + locations[i][6];
             var coords = coordStr.split(",");
             var pt = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
                bounds.extend(pt);
                
                var location_name = locations[i][0];
                var location_address = locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4];

                marker = new google.maps.Marker({
                    position: pt,
                    animation: google.maps.Animation.DROP,
                    icon: icon_image,
                    map: map,
                    title: location_name,
                    address: location_address
                });
                
                gmarkers.push(marker);

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {

                        var content = '<div id="info_window">'
                                      + '<h2 style="margin:0;">' + locations[i][0] + '</h2>'
                                      + locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4]
                                      + '<div style="clear:both;height:40px;">'
                                      + '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + locations[i][5] + ', ' + locations[i][6] + ');">Get Directions</a>';
                        
                        content += '</div>';
                        
                        content += '</div>';

                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                        map.setCenter(marker.getPosition());

                    }
                })(marker, i));
            }
        
        }
        
        function getDirectionsHere(lat,lng) {

            // GET THE SEARCH ADDRESS

            var address = 'Carmichael, CA';
            console.log('search address: ' + address);

            if (address) {

                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        search_lat = results[0].geometry.location.lat();
                        search_lng = results[0].geometry.location.lng();
                        console.log('search FROM lat: ' + search_lat + ' search FROM lng: ' + search_lng);
                        console.log('search TO lat: ' + lat + ' search TO lng: ' + lng);
                        calculateAndDisplayRoute(directionsService, directionsDisplay);
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

                // CHANGE THE ZOOM LEVEL AFTER THE USER SEARCHES TO FIT THE ROUTE WITHOUT SCROLLING

                map.setOptions({ minZoom: 10, maxZoom: 17 });
                map.setZoom(10);

                // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById('directions'));

                calculateAndDisplayRoute(directionsService, directionsDisplay);

                // CALCULATE THE FIRST ROUTE AND DIRECTIONS (DRIVING) BASED ON ADDRESS

                function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                    console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
                    var selectedMode = document.getElementById('mode').value;
                    directionsService.route({
                      origin: {lat: search_lat, lng: search_lng},
                      destination: {lat: lat, lng: lng},
                      travelMode: "DRIVING"
                    }, function(response, status) {
                      if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                      } else {
                        window.alert('Directions request failed due to ' + status);
                      }
                    });
                }
                
                // CALCULATE THE SECOND ROUTE AND DIRECTIONS (WALKING) BETWEEN PARKINGG GARAGE AND FINAL DESTINATION "CENTER OF MAP"
                
                function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                    var selectedMode = 'WALKING';
                    directionsService.route({
                      origin: {lat: lat, lng: lng},
                      destination: {lat: centerOfMap.lat, lng: centerOfMap.lng},
                      travelMode: google.maps.TravelMode[selectedMode]
                    }, function(response, status) {
                      if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                      } else {
                        window.alert('Directions request failed due to ' + status);
                      }
                    });
                }

            } else {
                getLocationPopup();
                return;
            }

        }
        
    </script>
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&callback=initMap"></script>

</body>
</html>
    <script type="text/javascript">
        
    </script>
</body>
</html>

Answer 1

您的代码有两个问题：

行车路线多段线是透明的（strokeOpacity: 0）
你有两个 calculateAndDisplayRoute 函数，一个用于驾驶，一个用于步行，这在 javascript 中不起作用，要么给它们两个不同的名称，要么创建一个函数来处理这两种情况:

    function calculateAndDisplayRoute(start, end, driving) {
      var selectedMode; 
      if (driving) selectedMode = "DRIVING";
      else selectedMode = "WALKING";
      directionsService.route({
        origin: start,
        destination: end,
        travelMode: selectedMode
      }, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          if (driving) {
            directionsDisplayD.setDirections(response);
            var start = new google.maps.LatLng(lat, lng);
            var end = centerOfMap;
            calculateAndDisplayRoute(start, end, false);
          } else directionsDisplayW.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }
  }
}

proof of concept fiddle

[

代码片段：

google.maps.event.addDomListener(window, "load", initMap);

var centerOfMap;
var geocoder;
var map;
var locations;
var gmarkers = [];
var search_lat;
var search_lng;
var infowindow;
var directionsDisplayD;
var directionsDisplayW;
var directionsService;

function initMap() {

  gmarkers = [];

  // Set the driving route line

  var drivingPathLine = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1,
    fillOpacity: 1
  });

  // Set the walking route line

  var walkingLineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

  var walkingPathLine = new google.maps.Polyline({
    strokeColor: '#0eb7f6',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: walkingLineSymbol,
      offset: '0',
      repeat: '10px'
    }],
  });

  directionsService = new google.maps.DirectionsService();

  geocoder = new google.maps.Geocoder();

  // SET THE CENTER OF THE MAP

  centerOfMap = {
    lat: 38.5803844,
    lng: -121.50024189999999
  };

  // ADD THE MAP AND SET THE MAP OPTIONS

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: centerOfMap
  });

  directionsDisplayW = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    polylineOptions: walkingPathLine,
    map: map,
    preserveViewport: true
  });
  directionsDisplayD = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    polylineOptions: drivingPathLine,
    map: map
  });

  var center_marker = new google.maps.Marker({
    position: centerOfMap,
    icon: 'http://maps.google.com/mapfiles/ms/micons/orange-dot.png',
    map: map
  });

  center_marker.addListener('click', function() {

    var gOneContent = '<div id="info_window">' +
      '<h2>Center Of Map</h2>' +
      '<div style="clear:both;height:40px;">' +
      '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + centerOfMap.lat + ', ' + centerOfMap.lng + ');">Get Directions</a>' +
      '</div>';

    infowindow.setContent(gOneContent);
    infowindow.open(map, center_marker);
    map.setCenter(marker.getPosition());

  });

  locations = [
    ["Joes Parking Garage", "1001 6th St", "Sacramento", "CA", "95814", "38.58205649", "-121.49857521", "parking_garage"],
    ["Mikes Parking Garage", "918 5th St", "Sacramento", "CA", "95814", "38.5826939", "-121.50012016", "parking_garage"]
  ];

  infowindow = new google.maps.InfoWindow();

  var marker, i;

  var bounds = new google.maps.LatLngBounds();

  console.log("found " + locations.length + " locations<br>");

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

    var icon_image = 'http://maps.google.com/mapfiles/ms/micons/parkinglot.png';

    var coordStr = locations[i][5] + "," + locations[i][6];
    var coords = coordStr.split(",");
    var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
    bounds.extend(pt);

    var location_name = locations[i][0];
    var location_address = locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4];

    marker = new google.maps.Marker({
      position: pt,
      animation: google.maps.Animation.DROP,
      icon: icon_image,
      map: map,
      title: location_name,
      address: location_address
    });

    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {

        var content = '<div id="info_window">' + '<h2 style="margin:0;">' + locations[i][0] + '</h2>' + locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4] + '<div style="clear:both;height:40px;">' + '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + locations[i][5] + ', ' + locations[i][6] + ');">Get Directions</a>';

        content += '</div>';

        content += '</div>';

        infowindow.setContent(content);
        infowindow.open(map, marker);
        map.setCenter(marker.getPosition());

      }
    })(marker, i));
  }
}

function getDirectionsHere(lat, lng) {

  // GET THE SEARCH ADDRESS

  var address = 'Carmichael, CA';
  console.log('search address: ' + address);

  if (address) {

    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        search_lat = results[0].geometry.location.lat();
        search_lng = results[0].geometry.location.lng();
        console.log('search FROM lat: ' + search_lat + ' search FROM lng: ' + search_lng);
        console.log('search TO lat: ' + lat + ' search TO lng: ' + lng);
        var start = new google.maps.LatLng(search_lat, search_lng);
        var end = new google.maps.LatLng(lat, lng);
        calculateAndDisplayRoute(start, end, true);
        // CHANGE THE ZOOM LEVEL AFTER THE USER SEARCHES TO FIT THE ROUTE WITHOUT SCROLLING

        map.setOptions({
          minZoom: 10,
          maxZoom: 17
        });
        map.setZoom(10);

        // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

        // directionsDisplay.setMap(map);
        directionsDisplayD.setPanel(document.getElementById('directions'));
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });


    // CALCULATE THE FIRST ROUTE AND DIRECTIONS (DRIVING) BASED ON ADDRESS

    function calculateAndDisplayRoute(start, end, driving) {
      console.log('start address coordinates: ' + start.lat() + ', ' + start.lng());
      var selectedMode; // = document.getElementById('mode').value;
      if (driving) selectedMode = "DRIVING";
      else selectedMode = "WALKING";
      directionsService.route({
        origin: start,
        destination: end,
        travelMode: selectedMode
      }, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          if (driving) {
            directionsDisplayD.setDirections(response);

            var start = new google.maps.LatLng(lat, lng);
            var end = centerOfMap;
            calculateAndDisplayRoute(start, end, false);

          } else directionsDisplayW.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }
  }
}

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 26px;
  font-family: "filson-soft";
}
#map_container {
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
  float: left;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map_container">
  <div id="map"></div>
</div>

Google 地图 JavaScript API 在同一张地图上显示两条具有不同折线样式的路线

Google Maps JavaScript API Display Two Routes with Different Polyline Styles on same Map

javascript

routes

driving-directions

google-maps-api-3

map-directions