Javascript 谷歌地图不显示整个路径的航路点

我正在使用谷歌地图V3方向服务绘制一条从源到目的地的简单路线

我需要添加一些路线必须经过的位置（中点或航路点）。谷歌地图为此提供了航路点

我已经参考了他们的示例来添加航路点。但当我试图通过添加航路点绘制路线时，路线仅显示从添加在航路点数组中的最后位置到目的地的路线。我希望显示从src到目的地的路线，路线上包括航路点

我已附上我的代码。我哪里做错了

        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);
                });


    }

var映射；
var wyPts=[]；
功能添加航路点（位置）
{           
推({
地点:地点,，
中途停留：对
});
}
函数createInfoWindowContent（latLng，contentStr）{
var content=''+contentStr+'
'+'LatLng:'+LatLng；
返回内容；
}
功能显示路线（起点、终点、服务、显示）{
服务路线({
来源:来源,，
目的地：目的地，
//航路点：[{地点：新建google.maps.LatLng（30.439025，-97.685654）}，{地点：新建google.maps.LatLng（30.434882，-97.677015）}，{地点：新建google.maps.LatLng（30.429495，-97.675274）}，
航路点：wyPts，
航路点：对，
travelMode:google.maps.Directions travelMode.DRIVING
}，功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
显示。设置方向（响应）；
}否则{
警报（'由于：'+状态而无法显示方向）；
}
});
}
函数initMap（）{
//////////源-目的地和中间航路点
var src=new google.maps.LatLng（30.444719，-97.686202）；///school
//附加航路点（src）；
var midPt1=new google.maps.LatLng（30.439025，-97.685654）；//
添加航路点（midPt1）；
var midPt2=新的google.maps.LatLng（30.434882，-97.677015）；//
添加航路点（midPt2）；
var midPt3=新的google.maps.LatLng（30.429495，-97.675274）；//
添加航路点（midPt3）；
/*对于（变量i=0；i

---

提前感谢。

polylineOptions匿名对象不是（也不应该是）google.maps.Polyline

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

    });

应该是：

var polylineProps = {
        strokeColor : '#009933',
        strokeOpacity : 1.0,
        strokeWeight : 3

    };

如果我解决了这个问题，则会显示完整路线的行：

代码片段：

var映射；
var wyPts=[]；
功能添加航路点（位置）{
推({
地点:地点,，
中途停留：对
});
}
函数createInfoWindowContent（latLng，contentStr）{
var content=''+contentStr+'
'+'LatLng:'+LatLng；
返回内容；
}
功能显示路线（起点、终点、服务、显示）{
服务路线({
来源:来源,，
目的地：目的地，
//航路点：[{地点：新建google.maps.LatLng（30.439025，-97.685654）}，{地点：新建google.maps.LatLng（30.434882，-97.677015）}，{地点：新建google.maps.LatLng（30.429495，-97.675274）}，
航路点：wyPts，
航路点：对，
travelMode:google.maps.Directions travelMode.DRIVING
}，功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
显示。设置方向（响应）；
}否则{
警报（'由于：'+状态而无法显示方向）；
}
});
}
函数initMap（）{
//////////源-目的地和中间航路点
var src=new google.maps.LatLng（30.444719，-97.686202）；