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

Posted

技术标签:

【中文标题】Google Maps JavaScript API 在同一张地图上显示两条不同折线样式的路线【英文标题】:Google Maps JavaScript API Display Two Routes with Different Polyline Styles on same Map 【发布时间】:2016-07-28 23:29:22 【问题描述】:

我正在使用 Google Maps 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;

问题是,目前代码的编写方式,地图上只显示了第二条路线(步行路线)。我知道我需要将折线变量和方向渲染器放在 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>

【问题讨论】:

How do you change the color of the dotted line on Google map v3 directions的可能重复 【参考方案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

[

代码 sn-p:

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 Maps JavaScript API 在同一张地图上显示两条不同折线样式的路线的主要内容,如果未能解决你的问题,请参考以下文章

在 typescript/javascript 的 google.maps.Geocoder().geocode() 上使用全局变量

JavaScript Google Maps API

Google Maps JavaScript API 警告:NoApiKeys

Google Maps Javascript API、DirectionsService、国家列表

Google Maps Javascript API 移动性能问题

具有自动完成功能的 Google Maps JavaScript API