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

Question

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

我遇到的问题是，如果您单击底部的 "Map"，当页面加载时，地图上的缩放比例不正确，并且似乎没有加载道路或其他任何内容。如果我刷新锚标记 link #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 调用移至您的第一个脚本源。

--------编辑--------

我刚刚注意到您在 google 地图 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 与任何脚本引用一起加载之前不会执行它。

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

Google Map JS API does not load correctly unless refreshed in jQuery Mobile

javascript

google-maps

jquery-mobile