複数の座標の間のパスをjavascript google map API

Question

で表示する方法配列と方向サービスに由来する複数の座標の間のパスを作成したい場合、これらの座標の間のパスをレンダリングしたい。あなたはここで座標の配列を見れば：

var requestResource = [{"origin": {"lat": 26.4499, "lng": 80.3319}, 
"destination": {"lat": 28.6139, "lng": 77.2090}}, {"origin": {"lat": 28.6139, 
"lng": 77.2090},"destination": {"lat": 28.9845, "lng": 77.7064}}]; 

私は、次のコードでコードを生成しようとしていますが、それは私の出発地と目的地の最後のセットの間の唯一のパスを提供します。

var directionsService = new google.maps.DirectionsService(); 

var indiaLatlng = {lat: 28.6139, lng : 77.2090}; 
map = new google.maps.Map(document.getElementById("map"), { 
    center : indiaLatlng, 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var rendererOptions = { 
preserveViewport: true,   
suppressMarkers:true 
}; 
var requestResource = [{"origin": {"lat": 26.4499, "lng": 80.3319}, "destination": {"lat": 28.6139, "lng": 77.2090}}, {"origin": {"lat": 28.6139, "lng": 77.2090},"destination": {"lat": 28.9845, "lng": 77.7064}}]; 
for(var r in requestResource) { 
    var resource = requestResource[r]; 
    var mapRequest = { 
     origin : resource["origin"], 
     destination : resource["destination"], 
     travelMode: google.maps.TravelMode.DRIVING 
    } 
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    directionsDisplay.setMap(map); 
    directionsService.route(mapRequest, function(result, status) { 
     console.log(result); 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(result); 
     } 
    }); 
} 

Answer 1

あなただけのあなたのコード内の1つのgoogle.maps.DirectionsRendererオブジェクトを持っています。ルートを設定するたびに、以前の表示が上書きされます。表示するルートごとに新しいDirectionsRendererを作成します。

proof of concept fiddle

コードスニペット：

var map; 
 

 
function initialize() { 
 
    var directionsService = new google.maps.DirectionsService(); 
 

 
    var indiaLatlng = { 
 
    lat: 28.6139, 
 
    lng: 77.2090 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
    center: indiaLatlng, 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var rendererOptions = { 
 
    preserveViewport: true, 
 
    suppressMarkers: true 
 
    }; 
 
    var requestResource = [{ 
 
    "origin": { 
 
     "lat": 26.4499, 
 
     "lng": 80.3319 
 
    }, 
 
    "destination": { 
 
     "lat": 28.6139, 
 
     "lng": 77.2090 
 
    } 
 
    }, { 
 
    "origin": { 
 
     "lat": 28.6139, 
 
     "lng": 77.2090 
 
    }, 
 
    "destination": { 
 
     "lat": 28.9845, 
 
     "lng": 77.7064 
 
    } 
 
    }]; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var r in requestResource) { 
 
    var resource = requestResource[r]; 
 
    var mapRequest = { 
 
     origin: resource["origin"], 
 
     destination: resource["destination"], 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    } 
 
    bounds.extend(new google.maps.LatLng(resource["origin"].lat, resource["origin"].lng)); 
 
    bounds.extend(new google.maps.LatLng(resource["destination"].lat, resource["destination"].lng)); 
 
    map.fitBounds(bounds); 
 
    directionsService.route(mapRequest, function(result, status) { 
 
     console.log(result); 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
 
     directionsDisplay.setMap(map); 
 

 
     directionsDisplay.setDirections(result); 
 
     } else alert("directions request failed, status:" + status) 
 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

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