Google Maps Wegpunkte zeigen nicht den gesamten Pfad an

Ich zeichne eine einfache Route von einer Quelle zum Ziel mithilfe von Google Maps V3 Directions Service.

Ich muss einige Orte (Mittelpunkte oder Wegpunkte) hinzufügen, die die Route durchlaufen muss. Google Maps bietet dafür Wegpunkte.

Ich habe auf ihre @ verwiesDokumentatio und Beispiel zum Hinzufügen von Wegpunkten. Wenn ich jedoch versuche, die Route durch Hinzufügen von Wegpunkten zu zeichnen, wird die Route nur vom @ aus angezeigLetzter Standor im Wegpunktarray zum @ hinzugefüZie. Ich möchte die Route von @ angezeigt bekomm src zuZie mit Wegpunkten entlang der Route.

Ich habe meinen Code angehängt. Wo gehe ich falsch?

        var map;
        var wyPts = [];



    function addWayPoints(location)
    {           
        wyPts.push({
            location:location,
            stopover:true
            });
    }

    function createInfoWindowContent(latLng, contentStr) {
        var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng    ;
        return content;
    }


    function displayRoute(origin, destination, service, display) {
        service.route({
            origin : origin,
            destination : destination,
            //waypoints: [{location: new google.maps.LatLng(30.439025, -97.685654)}, {location: new google.maps.LatLng(30.434882, -97.677015)} , {location:new google.maps.LatLng(30.429495, -97.675274)}],
            waypoints:wyPts,
            optimizeWaypoints: true,
            travelMode : google.maps.DirectionsTravelMode.DRIVING       
        }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                display.setDirections(response);
            } else {
                alert('Could not display directions due to: ' + status);

            }
        });
    }


    function initMap() {


        //////////source  destination and middle waypoints

        var src = new google.maps.LatLng(30.444719, -97.686202); // //school
            //addWayPoints(src);
        var midPt1 = new google.maps.LatLng(30.439025, -97.685654); // 
            addWayPoints(midPt1);
        var midPt2 = new google.maps.LatLng(30.434882, -97.677015); // 
            addWayPoints(midPt2);
        var midPt3 = new google.maps.LatLng(30.429495, -97.675274); // 
            addWayPoints(midPt3);


            /* for (var i = 0; i < wyPts.length; i++) {
                alert("pts are : " + wyPts[i].location);
            } */

        var destination = new google.maps.LatLng(30.401820, -97.669545); //


        ///////////draw the map
        map = new google.maps.Map(document.getElementById('map'), {
            center : src,
            mapTypeControlOptions : {
                style : google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position : google.maps.ControlPosition.TOP_RIGHT,
                mapTypeIds : [ google.maps.MapTypeId.ROADMAP,
                        google.maps.MapTypeId.TERRAIN,
                        google.maps.MapTypeId.HYBRID ]
            },
            zoomControl : true,
            zoomControlOptions : {
                position : google.maps.ControlPosition.RIGHT_CENTER
            },
            zoom : 14
        });

        //draw infowindow at src and destination
         var coordInfoWindowSrc = new google.maps.InfoWindow({
            content: createInfoWindowContent(src , "Source"),
            maxWidth : 180
        });
        coordInfoWindowSrc.setPosition(src);
        coordInfoWindowSrc.open(map);

         var coordInfoWindowDest = new google.maps.InfoWindow({
            content: createInfoWindowContent(destination , "Destination"),
            maxWidth : 180
        });
        coordInfoWindowDest.setPosition(destination);
        coordInfoWindowDest.open(map);


        //display route
        var polylineProps = new google.maps.Polyline({
            strokeColor : '#009933',
            strokeOpacity : 1.0,
            strokeWeight : 3

        });


        var directionsDisplay = new google.maps.DirectionsRenderer({
            draggable : false, //do not make the route draggable
            map : map,
            suppressMarkers: true ,
            polylineOptions : polylineProps
        });

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

        displayRoute(src, destination, directionsService,directionsDisplay);

        //add listener to map
        directionsDisplay.addListener(
                'change',
                function() {
                    displayRoute(src, destination, directionsService,
                            directionsDisplay);
                });


    }

Danke im Voraus

Antworten auf die Frage(2)

Ihre Antwort auf die Frage