多次包含 Google Maps JavaScript API + initMap 不是函数（无效值）

Question

我在我的页面中嵌入了 Google Map API (Javascript)。但是，地图只有在我刷新一次页面后才会加载。

当我检查控制台时，谷歌地图有两个错误。

❌You have included the Google Maps JavaScript API multiple times on this page. 
js?key=<my_key>&callback=initMap:140 
This may cause unexpected errors.

❌Uncaught (in promise) 
xd {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new xd (https://maps.googleapis.com/<my_key>&callback=initMap:138:113"}
message: "initMap is not a function"
name: "InvalidValueError"
stack: "Error↵    at new xd

1) 我想我没有多次调用 API，但不知何故有错误消息。

2) 至于第二个，我确实意识到我使用了一个包含 initMap 函数的脚本 src（来自文档），尽管我还没有定义它。 我确实从文档中看到了这个例子，但我不确定在这种情况下我应该如何使用它。

显示.html.erb

<div id="map"
  style="width: 100%;
  height: 300px;"
  data-markers="<%= @markers.to_json %>"
></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_API_BROWSER_KEY'] %>&callback=initMap"
  type="text/javascript"></script>

javascript/packs/map.js

import GMaps from 'gmaps/gmaps.js';

const mapElement = document.getElementById('map');
if (mapElement) {
  const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
  const markers = JSON.parse(mapElement.dataset.markers);
  map.addMarkers(markers);
  if (markers.length === 0) {
    map.setZoom(2);
  } else if (markers.length === 1) {
    map.setCenter(markers[0].lat, markers[0].lng);
    map.setZoom(14);
  } else {
    map.fitLatLngBounds(markers);
  }
}

Application.html.erb

     <%= yield %>
      <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <%= javascript_pack_tag 'application' %>
      <%= javascript_pack_tag "map" %>

Answer 1

您包含两次 Google Maps API，一次在 Show.html.erb 中，我相信它将加载到 Application.html.erb 中，然后您再次生成 JavaScript Google Maps API。该错误指出它在第 140 行第二次被包含在内，这是带有 initMap 的那个，所以在 Show.html.erb 中，它可能包含在索引和/或 Application.html.erb 中，所以我建议看在页面源获得最终加载页面的完整 HTML 视图，在第 140 行，您可能会看到第二个包含

其次，如果尚未声明一个函数，则您必须不调用它，所以现在您调用 I initMap 但该函数不存在。因此，首先删除 Show.html.erb 中的脚本 include 或删除 Application.html.erb 中的 yield 并删除 initMap 调用，直到地图按预期工作，然后继续 initMap 声明。

如果出现严重错误，JS 将停止加载或工作，因此两次包含 API 并调用不存在的函数会给你带来麻烦。

请确保在使用地图或调用 API 之前加载 API，并且由于 JS 是非阻塞同步的，因此请等到文档处于就绪状态后再执行任何操作。

编辑：您是否还确定在刷新时它不维护 Google Maps API 包括？所以你刷新整页还是只刷新一部分？