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

Question

我已经在页面中嵌入了Google Map API（Javascript）。但是，仅在刷新页面一次后才加载地图。

[检查控制台时，Google Maps出现两个错误。

❌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）关于第二个，我确实意识到我使用了一个脚本src（来自文档），该脚本包含initMap函数，尽管我尚未定义它。我确实从文档中看到了示例，但不确定在这种情况下应如何使用它。

Show.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行上，您可能会看到第二个包含项

第二，如果尚未声明函数，则必须不调用它，所以现在您调用IinitMap，但该函数不存在。因此，首先删除Show.html.erb中包含的脚本，或者删除Application.html.erb中的yield，然后删除initMap调用，直到地图按预期工作，然后继续进行initMap声明。

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

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

编辑：您还确定刷新后不维护Google Maps API包含吗？那么您刷新整个页面还是仅刷新其中的一部分？