通过 AJAX 加载 Google Maps API，控制台错误

Posted 2023-02-23

【中文标题】通过 AJAX 加载 Google Maps API，控制台错误

【英文标题】：Loading Google Maps API via AJAX, console error

【发布时间】：2015-01-28 17:40:19

【问题描述】：

我正在使用 jquery/javascript、ajax 和 php 构建一个完全动态的网站。

当我单击导航链接时，浏览器会使用 ajax 打开该页面。

所以基本上所有页面都加载在同一个 index.php 中。

如果我转到“位置”选项卡，那里有一个谷歌地图，它会动态加载谷歌地图脚本（向正文添加一个脚本标签）。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;callback=initialize"></script>

此脚本由前一个脚本自动加载

<script src="https://maps.gstatic.com/maps-api-v3/api/js/19/1/intl/hr_ALL/main.js"></script>

当我离开“位置”页面时，我会检查脚本是否存在并将其删除。

如果我在不刷新页面的情况下返回“位置”，我认为地图会有一个干净的开始，但我在控制台中收到此错误：

您已在此页面上多次包含 Google Maps API。 这可能会导致意外错误。

即使之前删除了脚本，并且地图和内容更改为其他内容，我还是会收到该错误。

既然我知道我只有一次地图实例，我应该忽略它吗？

或者它确实有某种对旧地图的引用，删除这两个脚本是不够的。

感谢您提供任何信息！

【问题讨论】：

为什么不在第一页加载期间一劳永逸地链接 gmaps 库？这比每次需要时都重新加载要好，我想它可以解决您的问题。

您的意思是我将 gmaps 脚本添加到 index.php 并在某个页面上使用 initialize() ？编辑：这种方法可以增加加载时间吗？

【参考方案1】：

删除脚本元素不会删除这些脚本创建的对象（基本上不会有任何影响）。

检查 maps-API 是否已经加载：

<script>
jQuery(function()
if(!window.google||!window.google.maps)
  var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3&' +
        'callback=initialize';
    document.body.appendChild(script);

else
  initialize();
);
</script>

【讨论】：

修复了控制台报错问题，脚本只加载一次。但是现在当它重新初始化时，它不能正确显示地图。它显示 ~200px

而不是全宽

当你调用初始化时，地图容器显然没有它的最终大小......不可能在不知道他什么时候得到最终大小的情况下提供解决方案（你使用某种动画吗？）

我删除了我以前的 cmets，因为我误解了你的评论，当我想写一个新的时，我在完成之前按了 enter... 没关系。您的最后一个解决方案可能会解决问题。我会尽快回复。谢谢

具体是怎么加载页面的，请出示相关代码（如getpage()）

getPage() 函数通过 ajax .load() 获取 .php 页面。当它完成加载时，它会将旧页面动画出来，并通过.animate() 进入新页面。现在我在动画回调中使用你的代码。一切都很好，除了当我更改页面并再次返回时，我得到一堆<script type="text/javascript" charset="UTF-8" src="https://mts1.googleapis.com/vt?...</script>，这似乎只是暂时的（~20 秒）。这会导致任何问题吗？