在同一Google地圖上同時顯示多個路線

我希望Google地圖能夠同時顯示多個來源相同目的地的多個路線。目的地是作爲一個明確定義的地址給出的，但是起源是用逗號分隔的字符串。當我運行一個循環來繪製谷歌地圖上的所有路線，在每次迭代中爲一個起點一個目的地對，它會覆蓋之前的路線並創建一條新路線。我希望舊路線（先前的起點，目的地對）停留，並且要在同一地圖上同時顯示新路線（新起點，目的地對）。如何在不覆蓋舊路線的情況下這樣做。請幫忙。在同一Google地圖上同時顯示多個路線

代碼

//directions.js 
 
MarketInfo = [ 
 
    ["GARIAHAT KMC MARKET", "K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata- 700019", "MAJOR (1400SHOP + HOWKER)", "FRUITS ETC", "", "", "BARABAZAR, KOLEYMART", "HOWRAH, BAGHAJATIN", "We colllect...", "", "MANY", "Cars, Light goods...", "Within one hour", "", "", "No problems", "", "IF A UNLOADING..."] 
 
];

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Directions service (complex)</title> 
 
    <style> 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    /* Optional: Makes the sample page fill the window. */ 
 
    
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto', 'sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
    } 
 
    
 
    #warnings-panel { 
 
     width: 100%; 
 
     height: 10%; 
 
     text-align: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    &nbsp; 
 
    <div id="warnings-panel"></div> 
 
    <script src="directions.js"></script> 
 
    <script> 
 
    function initialize() { 
 
     var markerArray = []; 
 
     var directionsService = new google.maps.DirectionsService; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 5, 
 
     center: { 
 
      lat: 22.771, 
 
      lng: 88.974 
 
     } 
 
     }); 
 

 
     var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     map: map 
 
     }); 
 
     calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map); 
 

 
     var onChangeHandler = function() { 
 
     calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map); 
 
     }; 
 

 
     //document.getElementById('start').addEventListener('change', onChangeHandler); 
 
     //document.getElementById('end').addEventListener('change', onChangeHandler); 
 
    } 
 

 

 
    function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map) { 
 

 
     for (var i = 0; i < markerArray.length; i++) { 
 
     markerArray[i].setMap(null); 
 
     } 
 

 
     for (pos in MarketInfo) { 
 
     var row = MarketInfo[pos]; 
 
     // Second loop for multiple destination 
 
     var str_array = row[7].split(','); 
 
     for (var j = 0; j < str_array.length; j++) { 
 
      directionsService.route({ 
 
      origin: str_array[j], 
 
      destination: row[1], 
 
      travelMode: 'DRIVING' 
 
      }, function(response, status) { 
 
      if (status === 'OK') { 
 
       document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>'; 
 
       directionsDisplay.setDirections(response); 
 
      } else { 
 
       window.alert('Directions request failed due to ' + status); 
 
      } 
 
      }); 
 
     } 
 
     } 
 
    } 
 
    </script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbXta5ppMyzPmTCGNsyP-djMlSOGJ9t9o&callback=initialize"> 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-07-27 ArnabC

你只有一個單一的DirectionsRenderer。您需要爲每個要顯示的路線初始化一個新的DirectionsRenderer。因此，在您的calculateAndDisplayRoute函數中創建一個新的DirectionsRenderer。

//directions.js 
 
MarketInfo = [ 
 
    ["GARIAHAT KMC MARKET", "K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata- 700019", "MAJOR (1400SHOP + HOWKER)", "FRUITS ETC", "", "", "BARABAZAR, KOLEYMART", "HOWRAH, BAGHAJATIN", "We colllect...", "", "MANY", "Cars, Light goods...", "Within one hour", "", "", "No problems", "", "IF A UNLOADING..."] 
 
];

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Directions service (complex)</title> 
 
    <style> 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    /* Optional: Makes the sample page fill the window. */ 
 
    
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto', 'sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
    } 
 
    
 
    #warnings-panel { 
 
     width: 100%; 
 
     height: 10%; 
 
     text-align: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    &nbsp; 
 
    <div id="warnings-panel"></div> 
 
    <script src="directions.js"></script> 
 
    <script> 
 
    function initialize() { 
 
     var markerArray = []; 
 
     var directionsService = new google.maps.DirectionsService; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 5, 
 
     center: { 
 
      lat: 22.771, 
 
      lng: 88.974 
 
     } 
 
     }); 
 

 
     var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     map: map 
 
     }); 
 
     calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map); 
 

 
     var onChangeHandler = function() { 
 
     calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map); 
 
     }; 
 

 
     //document.getElementById('start').addEventListener('change', onChangeHandler); 
 
     //document.getElementById('end').addEventListener('change', onChangeHandler); 
 
    } 
 

 

 
    function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map) { 
 

 
     for (var i = 0; i < markerArray.length; i++) { 
 
     markerArray[i].setMap(null); 
 
     } 
 

 
     for (pos in MarketInfo) { 
 
     var row = MarketInfo[pos]; 
 
     // Second loop for multiple destination 
 
     var str_array = row[7].split(','); 
 
     for (var j = 0; j < str_array.length; j++) { 
 
      directionsService.route({ 
 
      origin: str_array[j], 
 
      destination: row[1], 
 
      travelMode: 'DRIVING' 
 
      }, function(response, status) { 
 
      if (status === 'OK') { 
 
       document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>'; 
 
       var dirDisplay = new google.maps.DirectionsRenderer({ 
 
       map: map 
 
       }); 
 
       dirDisplay.setDirections(response); 
 
      } else { 
 
       window.alert('Directions request failed due to ' + status); 
 
      } 
 
      }); 
 
     } 
 
     } 
 
    } 
 
    </script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbXta5ppMyzPmTCGNsyP-djMlSOGJ9t9o&callback=initialize"> 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-07-27 13:59:58 eNVy

感謝隊友。像魅力一樣工作！ – ArnabC

在同一Google地圖上同時顯示多個路線

回答

相關問題