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

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

1 个答案: