Google Maps API v3仅在页面刷新后加载
我正在为我正在处理的网页摆弄Google Maps API。 我现在的问题是，地图完全按照我的意图加载，但仅在刷新页面后才加载。 如果我不刷新页面，我看到的就是canvas。 如果我离开页面并返回到该页面，问题仍然存在，因此调用地图initialize似乎是一个问题。
代码：
#map_canvas { width: 670px; height: 400px; background-color: #CCC; } function initialize() { var myLatLng = new google.maps.LatLng(31.247681, 121.449504); var map_canvas = document.getElementById('map_canvas'); var map_options = { center: new google.maps.LatLng(31.248195, 121.447431), zoom: 16, mapTypeControl: false, panControl: false, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER }, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(map_canvas, map_options); var contentString = 'Leung Gallery' + '50 Moganshan Rd. Building 7, Unit 108, Shanghai
' + '上海普陀区莫干山路50号7号楼108室
'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: myLatLng, map: map, }); google.maps.event.trigger(map, 'resize'); google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize);
浏览以前的问题，我没有找到任何与我的问题完全匹配的东西，但我看到了一些围绕google.maps.event.addDomListener(window, 'load', initialize);类似情况google.maps.event.addDomListener(window, 'load', initialize); 所以我想这可能是问题所在。 任何帮助表示赞赏。
编辑：指向正确的方向。 添加$(document).bind("projectLoadComplete", initialize); google.maps.event.addDomListener(window, 'load', initialize);之后google.maps.event.addDomListener(window, 'load', initialize); 解决了这个问题。 问题是使用导航时页面没有完全加载。 这个问题可能是Cargo Collective平台独有的。
它在Firefox中似乎对我很好，但在Internet Exploder中却没有。 在IE中，地图未加载的页面的第一个视图。 我很确定它与页面构建方式有关。 当我在IE中查看源代码并搜索文本“map_canvas”（当然是你要显示的地图的div的id）时，我无法找到div或任何带有该id的html元素。原始页面源由于某种原因，我实际上并没有弄清楚它是如何被添加到页面中的。 但是，div确实在开发者工具中显示为一个空的xml元素：
在随后刷新页面时，它会被填充。这使我相信无论你有什么其他代码必须在地图初始化脚本之后动态地将该div添加到页面中。 因此，如果您能够移动初始化地图脚本，那么放置它的最佳位置就在关闭标记之前。 如果它仍然无法正常工作，您可能想尝试延迟初始化脚本甚至运行更多，尝试：
google.maps.event.addDomListener( window, 'load', function () { //1000 milliseconds == 1 second, //play with this til find a happy minimum delay amount window.setTimeout(initialize, 1000); } );
经过几个小时不成功的搜索解决方案后，我发现了这个：
只需更换：
google.maps.event.addDomListener(window, 'load', initialize);
有：
$(document).ready(function(){ initialize(); });
指向了正确的方向。 添加$(document).bind("projectLoadComplete", initialize); google.maps.event.addDomListener(window, 'load', initialize);之后google.maps.event.addDomListener(window, 'load', initialize); 解决了这个问题。 问题是在使用导航时页面没有完全重新加载。 这个问题可能是Cargo Collective平台独有的。 我猜这是他们为使页面转换更快而做出的决定。
在API版本3中调用
google.maps.event.trigger(map, 'resize')
或版本2
map.checkResize()
确保在调用map.fitBounds() 之前调用google.maps.event.trigger(map, 'resize') map.fitBounds()否则会出现意外结果。
我检查了这个，它对我来说很好。 请查看fiddle http://jsfiddle.net/aCx6L/
在尝试了各种建议并失败后，我发现以下内容对我有用：
try {google;} catch (e){location.reload();}
您应该在创建地图之前添加它。
我知道这可能不是最好的解决方案，因为它会在服务器上产生额外的负载。
我还发现地图可以在Internet Explorer The Edge中第一次正确加载，但不能在Google Chrome中正确加载。