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

您的代码中只有一个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);对象。每次设置方向时，它都会覆盖先前的显示。为要显示的每条路线创建一个新的DirectionsRenderer。

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

clipToBounds

＆＃13;

如何在javascript google map API

1 个答案: