Question

当我提出这个问题时，我希望我不会忽视一个非常简单的解决方案。

我在Javascript中的函数中有一个循环，它获取坐标并从XML文件中命名一个位置，并在自定义的谷歌地图上创建标记。我希望这些标记可以点击并弹出一个信息窗口。我有为它编写的代码，并且所有标记在地图上显示正常。但是当我点击任何标记时，在创建的第一个标记上只出现一个信息窗口。这就是我做的......

for(var i=0; i<items.length; i++) {
        var latitude = items[i].getElementsByTagName('Lat')[0].childNodes[0].nodeValue;
        var longitude = items[i].getElementsByTagName('Lon')[0].childNodes[0].nodeValue;
        var latlng = new google.maps.LatLng(latitude,longitude);
        var titleNode = items[i].getElementsByTagName('Name')[0].childNodes[0];
        var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: titleNode.nodeValue,
                icon: orangeCircle
        });

        var infoWindow = new google.maps.InfoWindow({
                content: 'Hello world'
        });

        google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open(map, marker);
        });
}

我的猜测（这只是猜测，我是javascript的新手）是我需要为每个标记创建一个新的标记名称。如同，每个人不应该只被命名为“标记”。我想最容易解决的方法是根据循环的迭代次数创建一个变量名，所以marker1，marker2，marker3等等。但是我不知道如何设置变量名来添加数字基于我们正在进行的任何迭代来结束它。

也许我正在接近这个错误。如果它错了，还有其他方法我可以去做吗？谢谢！

Answer 1

您需要使用map和marker打破事件处理程序所拥有的闭包。

google.maps.event.addListener(marker, 'click', (function(lmap, lmarker) { 
       return function() { infoWindow.open(lmap, lmarker); }
    })(map, marker)
);

你拥有它的方式，事件处理程序没有创建一个将值 map和marker传递给inforWindow.open的函数，它正在传递实际变量本身;它正在为这些变量创建一个闭包。无论这些变量最终发生在函数末尾，都是所有处理程序都会使用的。

通过将这些变量传递给函数，打破闭包。函数参数按值传递，因此这实际上会创建这些变量的快照，并使用该值。

另请注意，在循环中声明这些变量没有帮助，因为所有变量都具有JavaScript中的函数作用域。这意味着即使您可能已在循环内声明了这些变量，声明也会悬挂到函数的顶部。它就像你在函数顶部实际声明了这些变量一样，这就是为什么JavaScript 中的所有变量应该在函数的最开始声明。

Answer 2

您可以将所有逻辑放在一个函数中，将其传递给i，它就可以正常工作。

for(var i=0; i<items.length; i++) {
    setUpMap( i );
}

这是功能：

function setUpMap( i ) {
    var latitude = items[i].getElementsByTagName('Lat')[0].childNodes[0].nodeValue;
    var longitude = items[i].getElementsByTagName('Lon')[0].childNodes[0].nodeValue;
    var latlng = new google.maps.LatLng(latitude,longitude);
    var titleNode = items[i].getElementsByTagName('Name')[0].childNodes[0];
    var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: titleNode.nodeValue,
            icon: orangeCircle
    });

    var infoWindow = new google.maps.InfoWindow({
            content: 'Hello world'
    });

    google.maps.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker);
    });
}

根据循环迭代设置变量名称

2 个答案: