Google Maps API v3：循环并在地图中添加折线

Question

我已经浏览了论坛试图寻找解决方案，并且我已经针对遇到的几个问题调整了我的代码，但这个问题让我望而却步。我正在尝试在地图上绘制多个点（有效），然后在这些点之间画线。每个标记都包含信息，例如纬度和经度，以及它的邻居（我想画线的点）。我也给它我想要的颜色，因为不同的“路线”可以有不同的颜色。我唯一能看到的问题是我画了一条线，将其设置在地图上，然后为下一个标记再次运行循环。

我的代码放置了标记，为每个标记放置了信息窗口，但没有在标记之间画线。任何人都可以看到我在哪里搞砸了，或者即使可以按照我的方式做到这一点？

我将 drawMap 函数分开的原因是如果用户想要过滤掉可见数据，我需要动态地重新绘制地图。所以，我将标记列表保存在全局范围内，这样即使函数完成后我也可以引用它。

我的代码：

http://www.nku.edu/~sweikatam1/nkuPhysicalMapTest.html

这个问题的特别之处在于函数 drawMap，它传递了一个对象数组 markerList，其中包含纬度、经度、颜色（用于折线）和其他数据位。 行位置：

        for(var j = 0; j < markerList.length; j++){
            if(markerList[j].name == markerList[i].neighbor){
                var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude);
                //alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude);
            }
        }
        //set the pathway for the two points
        var flightPlanCoordinates = [
            new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
            new google.maps.LatLng(targetDestination)
            ];

            //alert("Color: " + markerList[i].routeColor);
        //set the line and color    
        var flightPath = new google.maps.Polyline({
            path:flightPlanCoordinates,
            strokeColor:markerList[i].routeColor,
            strokeOpacity:2,
            strokeWeight:5
            });
        //apply lines
        flightPath.setMap(map);

整体功能：

    function drawMap(markerList){
    //alert("Starting drawMap");


    //create the map
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(39.032253, -84.465015),
      mapTypeId: google.maps.MapTypeId.HYBRID
    });


    var marker; 
    for (var i = 0; i <markerList.length; i++){
        /*alert("markerList @ i: " + markerList[i].name);
        alert("Marker Data: " + "Name: " + markerList[i].name + "\r "
                            + "Latitude: " + markerList[i].latitude + "\r "
                            + "Longitude: " + markerList[i].longitude + "\r "
                            + "Content Type: " + markerList[i].contentType + "\r "
                            + "Image: " + markerList[i].image
                            + "Color: " + markerList[i].routeColor);*/
        var contentData = '<b>'+markerList[i].name +'</b>: '
                            + markerList[i].latitude + ' x ' 
                            + markerList[i].longitude + '<br/><p>'
                            + markerList[i].contentType 
                            +'</p><img src="' + markerList[i].image + " height=150 width=100>";

        //create the marker

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markerList[i].latitude,markerList[i].longitude),
            draggable: false,
            icon: markerList[i].icon,
            map:map,
            content: contentData,
            title:markerList[i].name
        });

        //find the neighbor for the current marker and set the destination coordinates
        for(var j = 0; j < markerList.length; j++){
            if(markerList[j].name == markerList[i].neighbor){
                var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude);
                //alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude);
            }
        }
        //set the pathway for the two points
        var flightPlanCoordinates = [
            new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
            new google.maps.LatLng(targetDestination)
            ];

            //alert("Color: " + markerList[i].routeColor);
        //set the line and color    
        var flightPath = new google.maps.Polyline({
            path:flightPlanCoordinates,
            strokeColor:markerList[i].routeColor,
            strokeOpacity:2,
            strokeWeight:5
            });
        //apply lines
        flightPath.setMap(map);

        //handle open information windows
        google.maps.event.addListener(marker,'click', function(){
            closeInfos();
            var info = new google.maps.InfoWindow({content: this.content});
            info.open(map,this);
            infos[0]=info;
            });
            //alert("Marker " + markerList[i].name + " placed.");


    }
    //alert("drawMap complete. Drawing lines");

    <!-- DRAWING LINES COMPLETE -->
}

如果这里有任何奇怪、令人困惑或需要澄清的地方，请告诉我。批评和做得更好的方法总是受欢迎的。谢谢大家！

Answer 1

在定义 flightPlanCoordinates 时，第二个 LatLng 是从另一个 LatLng (targetDestination) 创建的。所以只需删除new google.maps.LatLng 部分并直接使用targetDestination。有了这个变化，我看到地图上绘制了一个蓝色的锯齿形和一个红色的锯齿形。

var flightPlanCoordinates = [
    new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
    targetDestination
];