Question

代码非常简单如下：

var populateGoogleMap = function (points) {
    for (i = points.length - 1; i >= 0; i--) {
        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker, 'click', function (e) {
            toggleBounce(marker);
        });
        nodes[i].marker = marker;
    }
};

事实证明，marker中的toggleBounce(marker)始终是创建的最后一个marker。我稍微考虑了这个问题，并通过修改函数找到了解决方案。我删除了函数中的循环，并在其他地方使用循环多次调用此函数。所以现在基本上变成了for (i = 0; i < points.length; i++) { populateGoogleMap(point); }。

Google Maps API是否有这种行为？我认为这对许多人来说可能会让人感到困惑，因为变量应该引用当前语境中的变量。

Answer 1

这不是Google地图独有的功能。您已经创建了X次事件监听器函数：

google.maps.event.addListener(marker, 'click', function (e) {
    toggleBounce(marker);
});

完成循环后，marker的值是循环中创建的最后一个值。你真正做的就是重新定义标记点击事件监听器，X次。

解释它的另一种方式。想象一下，你没有循环，但是你创建了多个标记，如下所示：

        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker, 'click', function (e) {
            toggleBounce(marker);
        });

        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker, 'click', function (e) {
            toggleBounce(marker);
        });

你已经设法创建了两个标记（即使它们具有相同的变量名），但你所做的只是创建一个事件监听器函数，它只适用于这两个标记中的第二个。 / p>

如果你做了以后：

        var marker1 = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker1, 'click', function (e) {
            toggleBounce(marker1);
        });

        var marker2 = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(point.target.x, point.target.y)
        });
        google.maps.event.addListener(marker2, 'click', function (e) {
            toggleBounce(marker2);
        });

然后你有两个不同的事件监听器函数，用于两个不同的标记。因此，通过循环将其移动到自己的函数中，并将每个标记作为参数传递给该函数，您将为每个标记创建一个唯一的事件监听器。有意义吗？

谷歌地图API事件监听器的行为 - 打算？

1 个答案: