修复“您在此页面上多次包含 Google Maps API。这可能会导致意外错误。”答案

【问题标题】：Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."修复“您在此页面上多次包含 Google Maps API。这可能会导致意外错误。”
【发布时间】：2015-04-28 21:29:09
【问题描述】：

我在标题中包含以下两个脚本，我收到错误“您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。”

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js key=************"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

当我删除任一脚本时，我会收到额外的 js 错误。如何在我的 rails 应用程序中正确重构这两个脚本？

【问题讨论】：

标签： ruby-on-rails api maps

【解决方案1】：

在上面的示例中，您包含两次相同的脚本，但参数不同。您应该能够通过包含一次脚本来解决您的问题，所有必需的参数如下：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&sensor=false"></script>

【讨论】：

@Jackson 一个好的开始是查看文档，它通常会向您展示参数是如何组织的。如果您是 Web 开发新手，请阅读一些有关 url 参数的信息，类似这样的内容会让您入门 en.wikipedia.org/wiki/Query_string

【解决方案2】：

如果您通过 ajax 调用调用 google 地图，则可以在退出调用地图的状态时使用 window.google = {}。

【讨论】：

我正在做一个 Vue SPA，当我用地图点击一个组件，然后离开然后回来时，我会收到这条消息，所以在组件中，我添加了一个 destroy() 函数（不在方法下，它是组件级方法）并做了$('#google-map').remove()和window.google = {}，它们的组合消除了此消息。
这很棒。也在 framework7 上工作，使用 pageBeforeRemoval 上的模板
你能解释一下这个解决方案吗？

【解决方案3】：

我知道在我的情况下它不是 Rails 应用程序，但可能对其他人有帮助......我正在使用 React，当我在视图/页面之间切换时遇到了同样的错误。

就像 wLc 所说的那样，window.google = {} 就像一个魅力，正在删除控制台中的错误，但 <script> 标记仍保留在 html 中，并且每次我重新访问包含地图的页面时都会添加。

在componentWillUnmount 上，我添加了一些代码来删除标签。

const allScripts = document.getElementsByTagName( 'script' );
[].filter.call(
  allScripts, 
  ( scpt ) => scpt.src.indexOf( 'key=googleAPIKEY' ) >= 0
 )[ 0 ].remove();

 window.google = {};

【讨论】：

太棒了。永远不会猜到。我正在使用 jquery 弹出 php 文件来显示位置。该文件具有带有密钥的 google maps api。这样，window.google = {} 放在$(document).ready(function() {... } 中就完全解决了问题。