0
Googleマップで、同じ宛先の複数の出発地からの複数のルートを同時に表示することができます。宛先は明確なアドレスとして与えられますが、起点はカンマで区切られた文字列です。私はループを実行して、すべての反復で1つの起点の1つの宛先ペアの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>
<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>
感謝メイト。魅力のように働いた！ – ArnabC