Google maps 谷歌地图信息窗口弹出窗口不';t加载动态内容

Google maps 谷歌地图信息窗口弹出窗口不';t加载动态内容,google-maps,infowindow,Google Maps,Infowindow,请帮我解决这个问题。我有以下带有工作地址变量的代码。我试图在信息窗口中添加标题,这样当用户单击地图上的标记时,可以在弹出窗口中看到一些内容。不幸的是,对于所有弹出窗口,我都可以看到相同的标题。我测试过,它是一个正确的js数组,但只显示了来自该数组的第一个标题。。请帮助解决这个问题。。提前谢谢大家 <script type="text/javascript" charset="utf-8"> var map; var address = < ? php echo json

请帮我解决这个问题。我有以下带有工作地址变量的代码。我试图在信息窗口中添加标题,这样当用户单击地图上的标记时,可以在弹出窗口中看到一些内容。不幸的是,对于所有弹出窗口,我都可以看到相同的标题。我测试过,它是一个正确的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映射;
变量地址=<?php echo json_编码($adr);?>;
变量标题=<?php echo json_编码($ttl);?>;
var x=0;
var nbAddresses=address.length;
var地理编码器;
var标记;
var contentString=标题[x];
函数init(){
变量moptions={
缩放:10,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=新的google.maps.map(document.getElementById(“map”),moptions);
geocoder=新的google.maps.geocoder();
对于(变量i=0;i
更改
x++
setInfoWindow();到


在程序开始时,将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
}
for(变量i=0;i
基本上,我们在这里做的是定义一个函数,然后直接运行它,并传入当前值'i'。然后该函数将返回另一个函数。此功能将在编码完成后运行。但是现在我们有了一个对“i”的引用,就像定义函数时一样。因此,您不再需要在该函数之外保留x的记录,因为x将等于i,它与传递到geocoder的地址相对应

这叫做闭包。

问题是:为什么这样:var contentString=titles[x];不是从数组中加载每个标题,而是只加载第一个标题?
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
}