javascript - 谷歌地图信息窗口内容在重新加载时消失。是什么原因造成的？

Question

我有 Javascript 从 csv 中读取数据以在 Google map 上显示为信息窗口内容:

// Create a map of maximum predicted value and time of that prediction
function maxValuesMap(data,maxmap) {
    var dataStr = new String(data),
        stations = $.csv.toObjects(dataStr),
        iWindows = [];

    for (var i=0;i<stations.length;i++) {
        var st = stations[i]['Station'],
            ts = stations[i]['Time'],
            max = stations[i]['Max'],
            lat = stations[i]['Lat'],
            lon = stations[i]['Lon'];

        var windowLatLng = new google.maps.LatLng(lat,lon);

        iWindows.push(new google.maps.InfoWindow());
        (function (ind,max,maxmap,ts,windowLatLng) {
            iWindows[ind].setOptions ({
                content: '<p>Max: '+max+'<br>Time: '+ts+'</p>',
                position: windowLatLng
            });
            console.log(iWindows[ind].content);
            console.log(ind);
            iWindows[ind].open(maxmap);
        })(i,max,maxmap,ts,windowLatLng);
    }
}

其中“data”是使用 jQuery csv 插件读取的 csv 文件内容，maxmap 是 Google map 对象。为了避免闭环问题，我制作了一个信息窗口数组，并在该内部函数内设置了选项。

有时，这似乎是随机发生的，我会在我想要的地方获得填充的信息窗口。没问题。在其他情况下，我会得到一些显示内容的信息窗口，但不是全部。然而，大多数时候我得到的是未填充(无内容)的信息窗口，尽管仍然在正确的位置。我总是能够 console.log 信息窗口内容和关联的索引，所以我知道正在分配内容......它只是没有每次都显示在信息窗口中。有谁知道我如何让内容每次都显示出来，以及是什么导致它消失？

工作:

不工作:

工作方式:

更新

在收到你们的意见后，我添加了一些延迟对象以确保在调用信息窗口制作代码之前 map 已初始化:

// Populate tab maps
var d = new $.Deferred(),
loadTabMaps('maxmap',[39.811,-97.98],4,d);
$.when(d)
    .done(function(maxmap) {
        mapStations(maxmap);
     });

// initialize maps
function loadTabMaps(mapdiv,ltln,zl,d) {
  var latlng = new google.maps.LatLng(ltln[0],ltln[1]),
    options = {
      center: latlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      zoom: zl
    }
  maxmap = new google.maps.Map(document.getElementById(mapdiv),options);
  d.resolve(maxmap);
}

// Get csv data and call maxValuesMap on success
function mapStations(maxmap) {
    // Populate the max values map
    $.get('../../datafiles/maxVals.csv',function(data) {
        maxValuesMap(data,maxmap);  // This is almost the original code above.
    });
}

在 maxValuesMap 中，我只添加了 iWindows[ind].setMap(maxmap)，就像 geocodezip 所建议的那样。尽管有这些变化，我仍然遇到同样的问题。不过，你们都指出这是一个时间问题这一事实是一个很大的帮助。

Answer 1

通过一些小改动，您更新后的代码可以与 JSON generated data 一起正常工作.查看下面的更改和 fiddle 是否有帮助。

否则，问题可能出在 CSV 插件上，所以请分享更多详细信息。

以下是我所做的更改:

1. 延迟初始化直到 DOM 加载

2. var d = new $.Deferred(),

   后的固定逗号

3. 从循环中取出 var 声明以供重用

这是 working jsfiddle .

希望对您有所帮助!