javascript - 谷歌地图 API v3 : Looping through and adding polylines to a map

Question

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

我的代码放置标记，为每个标记放置信息窗口，但不在标记之间绘制线条。任何人都可以看到我搞砸的地方吗，或者是否可以按照我正在做的方式做到这一点？

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

我的代码:

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。通过此更改，我看到 map 上绘制了一条蓝色之字形和一条红色之字形。

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