【问题标题】:Loading Google Maps API via AJAX, console error通过 AJAX 加载 Google Maps API,控制台错误
【发布时间】: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() ?编辑:这种方法可以增加加载时间吗?

标签: javascript php jquery ajax google-maps-api-3


【解决方案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() 进入新页面。现在我在动画回调中使用你的代码。一切都很好,除了当我更改页面并再次返回时,我得到一堆&lt;script type="text/javascript" charset="UTF-8" src="https://mts1.googleapis.com/vt?...&lt;/script&gt;,这似乎只是暂时的(~20 秒)。这会导致任何问题吗?
猜你喜欢
  • 1970-01-01
  • 2011-07-14
  • 1970-01-01
  • 2012-02-05
  • 1970-01-01
  • 2018-09-13
  • 2014-12-29
  • 2011-03-02
相关资源
最近更新 更多