Google Maps zeigen nicht alle Zielmarkierungen auf der Karte, nur die erste und letzte

Question

Ich habe eine Google Map, die meine Route korrekt mit allen Markern anzeigt. https://jsfiddle.net/az5tk8ns/17/

Die Ziele werden hart codiert in: destinations = ["", "durban,KZN", " ixpop,kzn"]

Ich habe dann eine andere Funktion, die ein Array von meine Adressen erzeugt:

var addresses = []; 
addresses.push('Durban, KZN'); 
addresses.push('izopo, KZN');` 

I dann eingestellt:

destinations = addresses 

https://jsfiddle.net/az5tk8ns/19/

dabei zeigt die Karte nur die Start- und Zielmarkierungen, nicht meine Haltestelle in der Mitte?

Wie kann ich diese Methode verwenden, damit ich mein dynamisch generiertes Array von Adressen an Google Maps weitergeben kann und jeden Punkt der Reise anzeigen kann?

vollständige Google Maps Syntax:

$(document).ready(function() { 


var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var distancearray=[]; 
var addresses = []; 
addresses.push('Durban, KZN'); 
addresses.push('izopo, KZN'); 

warehouse='ladysmith, kwa zulu natal'; 


function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(-28.5710903, 26.0826083); 
    var mapOptions = { 
    zoom: 7, 
    center: chicago 
    }; 
    map = new google.maps.Map(document.getElementById('route_map_canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
} 
var origin = "johannesburg", 
    destinations = addresses 

service = new google.maps.DistanceMatrixService(); 

function calcRoute() { 
    var waypts = []; 
    for (var i = 1; i < destinations.length - 1; i++) { 
    waypts.push({ 
     location: destinations[i], 
     stopover: true 
    }); 
    } 
    var request = { 
    origin: origin, 
    destination: destinations[destinations.length - 1], 
    waypoints: waypts, 
    optimizeWaypoints: true, 
    travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var orig = document.getElementById("orig"), 
     dest = document.getElementById("dest"), 
     dist = document.getElementById("dist"); 

     orig.value = response.routes[0].legs[0].start_address; 
     dest.value = response.routes[0].legs[0].end_address; 
     var total_distance = 0.0; 
     for (var i = 0; i < response.routes[0].legs.length; i++) { 
     total_distance += response.routes[0].legs[i].distance.value; 
     distancearray.push([response.routes[0].legs[i].distance.value]); 
     //alert(distancearray); 
     } 
     dist.value = total_distance + " meters"; 
    } 
    }); 

} 
    initialize(); 

}) 

Dank wie immer,

Answer 1

Sie alles richtig gemacht hat, außer, dass es nur zwei Ziele in dem destinations Variable, die als Start- und Ziel verwendet werden. Es gibt null Wegpunkte im directionsRequest Objekt in der calcRoute() Funktion. Dies ist der Grund, warum Sie keine Zwischenwegpunkte und somit keine Markierungen erhalten.

Sehen Sie diese updated Fiddle, wo ich eine weitere Position auf die addresses Variable geschoben haben (Zeilennummer 11) und es wird auf der Karte richtig angezeigt.

Sie können immer console.log(request); tun, um zu sehen, welches Anfrageobjekt Sie an google übergeben.