除非在jQuery Mobile中刷新,否则Google Map JS API无法正确加载

时间:2017-01-23 18:33:26

标签: javascript google-maps jquery-mobile

我有一个应用测试网站,如下所示:

Testing Site

我遇到的问题是如果你点击底部的“地图”,当页面加载地图上的缩放不正确时,它似乎没有加载道路或其他任何东西。如果我刷新锚标记链接#map,那么页面加载正常,地图显示正确的信息。可能导致这种情况发生的原因是什么?

感谢任何人的帮助。我真的很感激。

2 个答案:

答案 0 :(得分:2)

这是因为您正在调用以下内容:

google.maps.event.addDomListener(window, 'load', initMap);
来源之前

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpoSVdtZlPqe8aHatLN8JdUrtpP6gh2D4&callback=initMap">
    </script>

将google API src调用移至您的第一个脚本源。

<强> ------- ------- EDIT

我刚注意到您在google maps src调用中使用了回调。这会改变一些事情。

因此,您最后想要获取Google地图。

请务必将google.maps.event.addDomListener(window, 'load', initMap);来电移至您的初始化功能。

我在这里为你创建了一个小小的JSFiddle:

https://jsfiddle.net/iamjpg/4v4rmndo/

<script>

    var initMap = function() {
    alert('init Map!')
  }

  var initialize = function() {
    alert('Initialize!!!');
    google.maps.event.addDomListener(window, 'load', initMap);
  }

</script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>

答案 1 :(得分:0)

您有在加载Google脚本之前尝试执行的代码,导致出现控制台错误(当某些内容无法正常工作时,最好查看控制台):

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

在上面放置对google脚本的引用,或者将这样的代码放在一个准备好的处理程序中,以确保在DOM加载以及任何脚本引用之前不会执行它。