谷歌地图API v3仅加载页面刷新后

我在为我正在处理的网页摆弄Google Maps API。我现在的问题是，地图加载完全按照我的意图进行，但只能在刷新页面后才加载。如果我不刷新页面，我所看到的只是画布。如果我离开页面并返回它，问题仍然存在，所以看起来是调用地图initialize的问题。谷歌地图API v3仅加载页面刷新后

代码：

<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>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</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>

浏览通过前面的问题，我还没有发现任何精确匹配我的问题，但我已经看到了围绕着google.maps.event.addDomListener(window, 'load', initialize);所以我想这可能是一些类似的情况问题在哪里。任何帮助表示赞赏。

编辑：指向正确的方向。在google.maps.event.addDomListener(window, 'load', initialize);后面添加$(document).bind("projectLoadComplete", initialize);可解决此问题。问题在于使用导航时页面未完全加载。这个问题可能仅限于货运集体平台。

来源

2013-10-29 Darryl Leung

其装载预期看看这个小提琴.. http://jsbin.com/ofutUbA/1/edit – codebreaker

工作完美... –

@codebreaker可能它可能是我使用它的环境？我正在使用货运集体建立我的网页。不知道是否可能影响到地图刷新后页面初始化的原因。 –

得到了在正确的方向。在google.maps.event.addDomListener(window, 'load', initialize);后面添加$(document).bind("projectLoadComplete", initialize);可解决此问题。问题在于使用导航时页面没有完全重新加载。这个问题可能仅限于货运集体平台。我猜这是他们做出的让页面转换更快的决定。

来源

2013-10-30 04:46:08

我检查了这个，它对我的工作很好。请结帐fiddlehttp://jsfiddle.net/aCx6L/

来源

2013-10-29 06:27:55

它似乎在Firefox中适用于我，但不适用于Internet Exploder。在IE中，页面的第一个视图不加载地图。我非常确定，它与页面构建方式有关。当我在IE浏览器中查看源代码并搜索文本“map_canvas”（当然这是你的div用于显示地图的id）时，我无法找到一个div或任何带有该id的html元素由于某种原因，原始页面源代码，我还没有真正知道它是如何被添加到页面。但是，div在开发者工具中显示为一个空的xml元素：< div id =“map_canvas”/ >当页面随后刷新时，它会被填充。这使我相信，无论您拥有哪些其他代码在地图初始化脚本之后动态地将该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); 
    } 
);

来源

2013-10-29 08:44:42 astupidname

我只是试图改变脚本的那部分，并且一会儿，我认为它工作。我能够使用导航到达关于页面并正确加载。但是，我无法复制结果。我也尝试插入脚本，我假设是HTML的正文部分。这没有用。该部分接受一些HTML（例如“div”），我使用Cargo Collective作为我的平台，所以我对如何修改HTML非常有限。 –

在API版本3调用

google.maps.event.trigger(map, 'resize')

或第2版

map.checkResize()

，请务必让google.maps.event.trigger(map, 'resize')前调用map.fitBounds()或者你会得到意想不到的效果。

来源

2014-12-02 05:24:29 umer

这个v3版本适合我。 – Joe

尝试了各种建议后失败了，我发现我了以下工作：

try {google;} catch (e){location.reload();}

你应该只在创建地图之前添加此。

我知道这可能不是最好的解决方案，因为它会给服务器带来额外的负载。

我还发现地图可以在Internet Explorer The Edge中首次正确加载，但在Google Chrome中无法加载。

来源

2015-09-19 22:54:49

几个小时的解决方案不成功的搜索后终于让我找到这样的：

只需更换：

google.maps.event.addDomListener(window, 'load', initialize);

有：

$(document).ready(function(){ 
    initialize(); 
});

来源

2016-10-29 17:53:23 mmauzerr

谷歌地图API v3仅加载页面刷新后

回答

相关问题