Question

我有一个应用测试网站，如下所示：

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

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

Answer 1

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

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>

Answer 2

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

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

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

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

2 个答案: