0

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

我查了很多过去的帖子，其中很多人提到了导致相关的 turbolinks。我尝试了很多，但仍然没有用。

应用程序.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" %>

显示.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);
  }
}

如果您有任何其他问题或需要更多信息，请告诉我。

感谢您的所有帮助！

4

0 回答 0