Question

我有一个网站，用户可以通过进入该位置搜索英国的职业摔跤比赛。该网站使用Google Maps API和定制API来查询数据库并通过AJAX返回事件。

我用来迭代我的API结果的JavaScript函数如下所示：

function setMarkers(map, events) {
    var geocoder = new google.maps.Geocoder();
    for (var i=0; i < events.length; i++) {
        var wrestling_event = events[i];
        console.log(wrestling_event);
        var image_a = '/images/marker.png';
        var image_b = '/images/marker-over.png';
        geocoder.geocode({ address: wrestling_event.venue.post_code }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    icon: image_a
                });
                var infowindow = new google.maps.InfoWindow({
                    content: '<p><strong>' + wrestling_event.date + ': ' + wrestling_event.name + '</strong><br />' +
                             wrestling_event.venue.name + ',<br />' +
                             wrestling_event.venue.street_address + ',<br />' +
                             wrestling_event.venue.city + ',<br />' +
                             wrestling_event.venue.post_code + '</p>'
                });
                google.maps.event.addListener(marker, 'mouseover', function() {
                    marker.setIcon(image_b);
                });
                google.maps.event.addListener(marker, 'mouseout', function() {
                    marker.setIcon(image_a);
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
            }
        });
    }
};

这是根据Google Maps API示例改编的，可在此处找到：http://code.google.com/apis/maps/documentation/javascript/examples/icon-complex.html

我遇到的问题是，如果我从定制API返回多个结果，我的JavaScript函数会反复打印相同的事件，尽管记录了wrestling_event对象的结果。

wrestling_event变量似乎在地理编码块内部被覆盖（或在for()循环中的第一次迭代之后）。有这个原因吗？

Answer 1

请参阅我的回答How to pass parameter to an anonymous function defined in the setTimeout call?

简短回答：这是因为对geocoder的调用是异步的（如setTimeout）

Answer 2

是的，有一个原因 - 在循环中构建的所有回调函数共享相同的变量。

循环中的代码块不会像Java或C＃这样的语言创建新范围。只有函数才能创建新的范围。

你可以做的是编写一个单独的函数，返回处理程序。你将“wrestling_event”传递给函数，它可以返回你得到的回调代码。然后，您将该返回值作为回调参数传递给“geocode（）”例程。

这是JavaScript中常见的陷阱，应该在每本关于语言的书的封底上进行描述： - ）

Google地图和JavaScript for（）循环问题

2 个答案: