Google Maps infowindow内容在重新加载时消失.是什么原因造成的? [英] Google Maps infowindow content disappears on reload. What could be causing this?
问题描述
我有Javascript可以从csv读取数据，以在Google Maps上显示为信息窗口内容:
I have Javascript that reads in data from a csv to display as infowindow content on Google Maps:
// 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);
}
}
其中数据"是使用jQuery csv插件读取的csv文件内容，而maxmap是Google Map对象.为了避免循环闭合问题，我制作了一个信息窗口数组，并在该内部函数中设置了选项.
Where 'data' is the csv file contents read in using a jQuery csv plugin and maxmap is a Google map object. To avoid loop closure issues, I made an array of infowindows and set the options inside of that inner function.
有时，而且它似乎是随机发生的，我在需要它们的位置就获得了信息窗口.没问题.在其他情况下，我会看到一些显示内容的信息窗口，但不是全部.但是，大多数情况下，尽管仍然位于正确的位置，但我却没有填充(无内容)信息窗口.我总是能够console.log infowindow内容和相关的索引，所以我知道内容已被分配...它只是不会每次都出现在infowindows中.有谁知道我如何让内容每次都显示出来以及是什么导致它消失了?
Sometimes, and it seems to happen randomly, I get populated infowindows right where I want them. No problem. In other cases, I get some infowindows showing content, but not all. However, most times I get un-populated (no content) infowindows, albeit still in the right places. I am always able to console.log the infowindow content and associated index, so I know the content is being assigned...it's just not showing up in the infowindows every time. Does anyone know how I can get the content to show up every time and what is causing it to disappear?
工作:
不起作用:
工作方式:
更新
在听到你们两个的声音后，我添加了一些延迟的对象以确保在调用信息窗口生成代码之前对地图进行初始化:
After hearing from you both I added some deferred objects to make sure the map initializes before I call the infowindow-making code:
// 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.尽管有这些更改，但我仍然遇到相同的问题.大家都指出这是一个定时问题，这确实有很大帮助.
In the maxValuesMap, I only added iWindows[ind].setMap(maxmap), like geocodezip suggested. Despite these changes, I'm still having the same issue. The fact that you all pointed out it's a timing issue is a big help, though.
推荐答案
With a few minor changes, your updated code works fine with JSON generated data. See if the changes and fiddle below will help.
否则，问题可能出在CSV插件上，所以请分享更多详细信息.
Otherwise, the problem may be with the CSV plugin, so please share more details.
这是我所做的更改:
-
延迟初始化，直到DOM加载
Delayed initialization until DOM loads
var d = new $.Deferred(),
从循环中取出var声明以供重用
took out var declarations out of loop for reuse
这是工作jsfiddle .
我希望这会有所帮助！
这篇关于Google Maps infowindow内容在重新加载时消失.是什么原因造成的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
