javascript - 谷歌地图信息窗口在不同的标记上给出相同的结果

Question

有以下问题，信息窗口在不同的标记上给出相同的结果。当我在 geocoder.geocode 函数外部进行调试时，它会显示正确的信息，但内部始终相同(第一个)。最棒的部分是当我调试其中的 i 变量时它显示了正确的值。

var optionMap = {
            zoom: 16,
            MapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false
        };

        var map = new google.maps.Map(document.getElementById('map'), optionMap);

        var geocoder = new google.maps.Geocoder();

        var latlngbounds = new google.maps.LatLngBounds();

        var icon = new google.maps.MarkerImage('images/gm_pin.png',
        new google.maps.Size(20, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

        for(var i = 0; i < arrAddress.length; i++) {

            var address = arrAddress[i];

            var html_title = "<div class='info'><h4>" + address + "</h4></div>";

            geocoder.geocode({
                'address': address
            }, function (results, status) {

                 if(status == google.maps.GeocoderStatus.OK) {


                    var marker = new google.maps.Marker({
                        map: map,
                        icon: icon,
                        html: html_title, 
                        position: results[0].geometry.location
                    });

                    var contentString = '';

                    var infoWindow = new google.maps.InfoWindow({
                        content: contentString

                        });

                    google.maps.event.addListener(marker, 'mouseover', function() {  
                        infoWindow.setContent(this.html);
                        infoWindow.open(map, this);
                    });

                    google.maps.event.addListener(marker, 'mouseout', function() {  
                        infoWindow.close(map, this);
                    });

                    latlngbounds.extend(results[0].geometry.location);

                    if(i == arrAddress.length) {
                        map.fitBounds(latlngbounds);
                    }

                    google.maps.event.trigger(map, 'resize')
                }
            });
        }

Answer 1

调用Geocoder.geocode(request, callback) is asynchronous .当服务器响应时，回调函数被调用。通常到这个时候，for 循环已经结束了。这可以完全符合您描述的结果，例如每个标记都有相同的内容，因为标记是在回调中创建的，它发生在循环结束后，因此它将使用 html_title 中的最后一个值。

解决这个问题的方法是在循环内创建一个闭包，它将“捕获”循环内的变量 html_title。这样，回调将使用正确的 html_title 值。

JavaScript 中典型的显式闭包如下所示:

// Wrap a function in () and immediately call it with another ()
// Pass in the arguments in the second () 
// This causes them to be 'captured' inside the function
(function(args) { /* Do something with args */ })("Hello", 42);

在您的代码中，闭包需要在循环期间捕获地址:

for(var i = 0; i < arrAddress.length; i++) {
  var address = arrAddress[i];
  var html_title = "<div class='info'><h4>" + address + "</h4></div>";

  (function(address, title) {
    // Inside the closure, we can use address and html_title
    geocoder.geocode({'address': address /* captured */}, function (results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          icon: icon,
          html: title, /* captured */ 
          position: results[0].geometry.location
        });

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

        // ...
      }
    });
  })(address, html_title); // <- Call function, pass the vars to be captured 
}