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
];