javascript 仅在页面刷新后加载 Google Maps API v3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19651008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API v3 Loading Only After Page Refresh
提问by Darryl Leung
I'm fiddling around with the Google Maps API for a webpage I'm working on. My issue right now is, the map loads exactly as I intend it to but only after refreshing the page. If I do not refresh the page, all I see is the canvas. The problem remains if I leave the page and return to it so it appears to be an issue with calling for the map to initialize.
我正在为我正在处理的网页摆弄 Google Maps API。我现在的问题是，地图完全按照我的意图加载，但只能在刷新页面后加载。如果我不刷新页面，我看到的只是画布。如果我离开页面并返回该页面，问题仍然存在，因此调用地图到initialize.
The code:
代码：
<style>
#map_canvas {
width: 670px;
height: 400px;
background-color: #CCC;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
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 =
'<b>Leung Gallery</b>' +
'<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
'<p>上海普陀区莫干山路50号7号楼108室</p>';
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);
</script>?
Browsing through previous questions, I haven't found anything that matched my problem exactly but I've seen some similar situations that revolved around google.maps.event.addDomListener(window, 'load', initialize);so I'm thinking that might be where the issue is. Any help is appreciated.
浏览以前的问题，我没有找到任何与我的问题完全匹配的内容，但我看到了一些类似的情况，google.maps.event.addDomListener(window, 'load', initialize);所以我认为这可能是问题所在。任何帮助表示赞赏。
Edit: Got pointed in the right direction. Adding $(document).bind("projectLoadComplete", initialize);after google.maps.event.addDomListener(window, 'load', initialize);fixes the issue. The issue was that the pages were not fully loading when using the navigation. This issue is probably exclusive to the Cargo Collective platform.
编辑：指向正确的方向。解决问题$(document).bind("projectLoadComplete", initialize);后添加google.maps.event.addDomListener(window, 'load', initialize);。问题是使用导航时页面未完全加载。这个问题可能是 Cargo Collective 平台独有的。
采纳答案by Darryl Leung
Got pointed in the right direction. Adding $(document).bind("projectLoadComplete", initialize);after google.maps.event.addDomListener(window, 'load', initialize);fixes the issue. The issue was that the pages were not fully reloading when using the navigation. This issue is probably exclusive to the Cargo Collective platform. I am guessing it is a decision they made to make the page transitions faster.
指向了正确的方向。解决问题$(document).bind("projectLoadComplete", initialize);后添加google.maps.event.addDomListener(window, 'load', initialize);。问题是使用导航时页面没有完全重新加载。这个问题可能是 Cargo Collective 平台独有的。我猜这是他们做出的让页面转换更快的决定。
回答by astupidname
It seems to work fine for me in Firefox, but not in Internet Exploder. In IE the first view of the page the map does not load. I am pretty certain that it has got to do with the way the page is being built. When I view source in IE and do a search for the text "map_canvas" (which is of course the id of your div for the map to display in) I am not able to find a div or any html element with that id within the raw page source for some reason, and I have not actually figured out how it's being added in to the page. But, the div does show up in Developer Tools as an empty xml element: <div id="map_canvas" /> which upon subsequent refresh of the page it gets filled in. This leads me to believe that whatever other code you have which must be adding that div to the page dynamically it is running after your map initialization script. So, if you have the ability to move your initialize map script the best place to put it would be immediately before the closing </body> tag. If it still does not work properly then, you may want to try and delay your initialize script from running even a bit more, try:
它在 Firefox 中对我来说似乎工作正常，但在 Internet Exploder 中却没有。在 IE 中，页面的第一个视图不会加载地图。我很确定这与页面的构建方式有关。当我在 IE 中查看源代码并搜索文本“map_canvas”（这当然是用于显示地图的 div 的 id）时，我无法在由于某种原因，我没有真正弄清楚它是如何添加到页面中的。但是，div 确实在开发人员工具中显示为一个空的 xml 元素： <div id="map_canvas" /> 在随后刷新页面时它会被填充。这让我相信，无论您拥有什么其他必须将该 div 动态添加到页面的代码，它都会在您的地图初始化脚本之后运行。所以，如果你有能力移动你的初始化地图脚本，最好把它放在结束 </body> 标签之前。如果它仍然不能正常工作，你可能想尝试延迟你的初始化脚本运行，尝试：
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);
}
);
回答by mmauzerr
After several hours of unsuccessful search for a solution finally I found this:
经过几个小时的不成功搜索解决方案后，我终于找到了这个：
Just replace:
只需更换：
google.maps.event.addDomListener(window, 'load', initialize);
with:
和：
$(document).ready(function(){
initialize();
});
回答by umer
In API version 3 call
在 API 版本 3 中调用
google.maps.event.trigger(map, 'resize')
or for version 2
或版本 2
map.checkResize()
Make sure you call google.maps.event.trigger(map, 'resize')BEFOREcalling map.fitBounds()or you will get unexpected results.
确保在打电话google.maps.event.trigger(map, 'resize')之前先打电话，map.fitBounds()否则你会得到意想不到的结果。
回答by Marikkani Chelladurai
I have checked this and its working fine for me. Please checkout the fiddlehttp://jsfiddle.net/aCx6L/
我已经检查过这个，它对我来说工作正常。请查看fiddlehttp://jsfiddle.net/aCx6L/
回答by Chong Lip Phang
After trying out various suggestions and failed, I found that the following works for me:
在尝试了各种建议并失败后，我发现以下对我有用：
try {google;} catch (e){location.reload();}
You should add this just before the creating the map.
您应该在创建地图之前添加它。
I know this may not be the best solution as it incurs extra load on the server.
我知道这可能不是最好的解决方案，因为它会给服务器带来额外的负载。
I also found out that the map can load correctly the first time round in Internet Explorer The Edge but not in Google Chrome.
我还发现地图可以在 Internet Explorer The Edge 中第一次正确加载，但在 Google Chrome 中则不能。
