谷歌地图信息窗口弹出不加载动态内容答案

【问题标题】：googlemaps info window popup doesn't loading the dynamic content谷歌地图信息窗口弹出不加载动态内容
【发布时间】：2013-01-04 00:40:25
【问题描述】：

请帮我解决这个问题。我有以下带有工作地址变量的代码。我尝试向 Infowindow 添加标题，因此当用户单击地图上的标记以查看弹出窗口中的某些内容时。不幸的是，对于所有弹出窗口，我可以看到相同的标题。我测试过，它是一个正确的 js 数组，但只显示来自数组的第一个标题..请帮助解决这个问题..提前谢谢你们！

<script type="text/javascript" charset="utf-8">    
var map;
var address = < ? php echo json_encode($adr); ? > ;
var titles = < ? php echo json_encode($ttl); ? > ;
var x = 0;
var nbAddresses = address.length;
var geocoder;
var mark;
var contentString = titles[x];

function init() {
    var moptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), moptions);
    geocoder = new google.maps.Geocoder();
    for (var i = 0; i < nbAddresses; i++) {
        geocoder.geocode({
            'address': address[i]
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                mark = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    title: titles[x]
                });
                map.setCenter(results[0].geometry.location);
                x++;
                setInfoWindow();
            }
        });
    }

    function setInfoWindow() {
        google.maps.event.addListener(mark, 'click', function(event) {
            var iwindow = new google.maps.InfoWindow();
            iwindow.setContent(contentString);
            iwindow.open(map, this);
        });
    }
}
window.onload = init;
</script>

【问题讨论】：

拍摄问题是：为什么这样：var contentString =titles[x];不从数组中加载每个标题，而只加载第一个？

标签： google-maps infowindow

【解决方案1】：

改变
x++;
设置信息窗口（）；到

setInfoWindow();
x++;   
sets the problem !

【讨论】：

【解决方案2】：

在程序开始时，您将 contentString 设置为标题数组中的第一个元素

var contentString = titles[x];

然后你在 setInfoWindow 函数中使用这个变量不变。

如果您将 setInfoWindow 更改为接受这样的 contentString 参数会怎样

function setInfoWindow(contentString) {...

调用 setInfoWindow 时，传入标题。

setInfoWindow(title[x]);

确保在调用此函数后增加 x，因此将 x++ 移动到 setInfoWindow 调用下方。

编辑您还会不时注意到一个奇怪的问题，即某些标题可能出现在错误的标记上。这是因为您同时执行多个地理编码，您可能会收到乱序的响应。

以下修改将解决此问题。

for (var i = 0; i < nbAddresses; i++) {
    geocoder.geocode({
        'address': address[i]
    }, return function(x) {  // we define a function and call it straight away. The function returns another function which is our callback.
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                mark = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    title: titles[x]
                });
                map.setCenter(results[0].geometry.location);
                setInfoWindow();
             }
         }
    }(i)); // (i) after the function declaration calls the function and passes in the current value of i
}

所以基本上我们在这里所做的是定义一个函数并使用传入的“i”的当前值立即运行它。然后该函数将返回另一个函数。一旦 goecoding 完成，此函数将运行。但是现在我们有了对“i”的引用，就像定义函数时一样。因此，您不再需要在此函数之外保留 x 的记录，因为 x 将等于 i，这与传递给地理编码器的地址相对应。

这称为闭包。 How do JavaScript closures work?

【讨论】：