在同一張Google地圖上同時顯示多條路線
[英]Show Multiple Routes simultaneously on same Google Map
問題描述
我希望Google地圖同時顯示來自多個起點且目的地相同的多條路線。 目的地是一個定義明確的地址，但是來源是逗號分隔的字符串。 當我運行循環以在每次迭代中在一個起點對上一個起點對在Google地圖上繪制所有路線時，它將覆蓋先前的路線並創建一條新路線。 我想保留舊路線（先前的起點，目的地對），而新路線（新的起點，目的地對）在同一地圖上同時顯示。 我該如何做而不覆蓋舊路由。 請幫忙。
碼
//directions.js MarketInfo = [ ["GARIAHAT KMC MARKET", "KMC 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> <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>
1 個解決方案
解決方案1
1 已采納 2017-07-27 13:59:58
您只有一個DirectionsRenderer。 您需要為每個要顯示的路線初始化一個新的DirectionsRenderer。 因此，在您的calculateAndDisplayRoute函數中創建一個新的DirectionsRenderer。
//directions.js MarketInfo = [ ["GARIAHAT KMC MARKET", "KMC 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> <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>
如何在Google Map中繪制從源到目的地的多條可能路線
[英]How to Draw Multiple Possible Routes in Google Map from Source to Destination
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.