javascript - Google map 信息窗口内容在重新加载时消失。可能是什么原因造成的？

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 .

希望这会有所帮助!