javascript - Google Maps API 将变量传递到 InfoWindow

Question

我有以下代码循环遍历标记数组；

地点数组:

var map_markers = [['Windsor Road, Salisbury, SP2 7NF <br/> 2nd Line', 'Windsor Road, Salisbury,', 1],['Bishopdown Road, Salisbury, SP1 3DT <br/> 2nd Line', 'Bishopdown Road, Salisbury,', 2],['Gainsborough Close, Salisbury, SP2 9HD <br/> 2nd Line', 'Gainsborough Close, Salisbury,', 3],['Montgomery Gardens, Salisbury, SP2 7UQ <br/> 2nd Line', 'Montgomery Gardens, Salisbury,', 4],['Manor Court, Salisbury, SP1 1LN <br/> 2nd Line', 'Manor Court, Salisbury,', 5],];

显然，上述所有内容都需要地理编码，以便我可以在 map 上为每个内容放置一个图钉，我为此构建了以下函数:

function init_map(map_id, center_address, markers) {

    geocoder = new google.maps.Geocoder();

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

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

         //Init Map Options
         var mapOptions = {
            zoom: 11,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         }

         var map = new google.maps.Map(document.getElementById(map_id), mapOptions);

         var infowindow = new google.maps.InfoWindow();

         var marker, i;

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

            var marker_address = markers[i][1];
            var marker_content = markers[i][0];

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

             if (status == google.maps.GeocoderStatus.OK) { 
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {

                    return function() {
                        infowindow.setContent(marker_content);
                        infowindow.open(map, marker);
                    }

                    }) (marker, i)); 

                } else {
                    alert("There was a issue getting the property information.")
                }
            });
         }

      } else {

        alert("Unable to find address: " + status);

      }

  });
}

使用上面的代码，标记已正确放置在 map 上，当我单击标记时，信息窗口确实出现，但是，它似乎卡在循环中，并且仅在所有标记上显示最终的数组元素内容。有人可以推荐修复吗？

Answer 1

问题是您在循环中创建 marker_content，但您的事件监听器函数只会知道其最终值。下面是我如何编写此内容的尝试:

...
for (i = 0; i < markers.length; i++) {  
    var marker_address = markers[i][1];
    var marker_content;

    geocoder.geocode( { 'address': marker_address , 'region': 'uk' }, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                map: map
            });

            marker_content = markers[i][0];

            bindInfoWindow(marker, map, infowindow, marker_content);
        } else {
            alert("There was a issue getting the property information.")
        }
    });
}
...

// new global function, NOT nested in init_map
function bindInfoWindow(marker, map, infowindow, content) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
    }
}