Google Maps foreach循环中的多个信息窗口 [英] Google Maps multiple info Windows in foreach loop

问题描述

我正在地图上显示多个标记，并希望获取每个infowindow以显示每个位置的内容.

I am showing multiple markers on a map and am looking to get each infowindow to show the content for each location.

我几乎已经有了这段代码，但是，我无法获得infowindow来从当前迭代的数组中获取值.如果我规定了数组的索引，它将起作用.

I'm almost there with this code however, I can not get the infowindow to get the value from the array for the current iteration. It works if I stipulate the index of the array.

例如

//Gives the 6th object in the array and shows the correct content
var content= (apartments[6].info);

//Gives Uncaught TypeError: Cannot read property 'info' of undefined
var content= (apartments[i].info);

我的代码

var apartments = jQuery.parseJSON(result);
//console.log(array);


var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(53.408371, -2.991573),
    zoom:   5
});         
var geocoder = new google.maps.Geocoder(); 
var infowindow = new google.maps.InfoWindow();     

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {

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

        geocoder.geocode({ address: apartments[i].postcode + ' UK', }, function(result, status) {
            if (status == 'OK' && result.length > 0) {

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

                google.maps.event.addListener(marker, 'click', function() {
                    var content = (apartments[i].info);

                    infowindow.setContent(content);
                    infowindow.open(map, this);
                });                                 
            }
        });
    }   

});

推荐答案

异步函数在循环中常见的问题(地理编码器是异步的).到回调函数运行时，i已超过输入数组的末尾.

Common issue with asynchronous functions in loops (the geocoder is asynchronous). By the time the callback function runs, i is past the end of the input array.

您可以通过函数关闭来解决它:

You can solve it with function closure:

for (var i = 0; i < apartments.length; ++i) {
  geocodeAddress(apartments[i], infowindow, map);
}

function geocodeAddress(address, infowindow, map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: address.postcode + ' UK',
  }, function(result, status) {
    if (status == 'OK' && result.length > 0) {

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

      google.maps.event.addListener(marker, 'click', function() {
        var content = (address.info);

        infowindow.setContent(content);
        infowindow.open(map, this);
      });
    } else {
      alert("geocoder returns status:" + status)
    }
  });

概念提琴证明

这篇关于Google Maps foreach循环中的多个信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！