Question

我目前正在处理收到以下错误的Rails应用程序：

您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

经过一番研究后，我发现Turbolinks导致了这个问题。点击link_to后，Google地图创建的所有DOM元素都会保留在DOM中。当渲染新页面时，会添加另一组Google Map DOM元素，从而导致重复和错误。

我可以通过简单地将'data-no-turbolink' => true添加到我的link_to来快速解决这个问题，但这会破坏使用Turbolinks强制刷新的目的。

我想知道是否有一个潜在的解决方法可以在不关闭Turbolinks的情况下停止这种复制？

map.js：

var initMap = function initMap() {

  if (typeof mapLatLng != "undefined") {

    // we can use this to set the map zoom
    // in different places. 
    // use: window.setZoom = 12;
    if (typeof setZoom ==! "undefined") {
      var mapZoom = setZoom;
    } else {
      var mapZoom = 14;
    }

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: mapZoom,
      center: mapLatLng,
      disableDefaultUI: true,
      scrollwheel: false
    });

    var markerSVG = {
      path: 'M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150 362 150 150 362z',
      fillColor: '#f32e74',
      fillOpacity: 1,
      strokeWeight: 0,
      anchor: new google.maps.Point(870,1650),
      scale: (0.02, 0.02)
    };

    var mapMarker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: markerSVG,
    });
  }
}

视图：

<% if @job.address.latitude && @job.address.longitude %>
  <%= javascript_tag do %>
    window.mapLatLng = {lat: <%= @job.address.latitude %>, lng: <%= @job.address.longitude %>};
  <% end %>
  <% content_for :js do %>
    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script>
  <% end %>
<% end %>

Answer 1

而不是<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script>使其成为常规<script></script>标记，并在initMap函数下添加以下内容：

if(window.google){
  initMap();
} else{
  $.ajax('https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap', {
    crossDomain: true,
    dataType: 'script'
  });
}

如果您不使用jquery，那么只需使用XMLHttpRequest。

Answer 2

试试这个......

google.maps.event.addDomListener(window, 'turbolinks:load', initialize);

请记住，所有google脚本都必须留在Turbolink之后，就像这样：

= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'https://maps.googleapis.com/maps/api/js', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'gmap', 'data-turbolinks-track': 'reload'

详情请见：https://github.com/turbolinks/turbolinks

Answer 3

我遇到了同样的问题，不幸的是，经过这么多个月，这可能对你毫无帮助。

我感动：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

＆lt;％= csrf_meta_tags％＆gt;之后的 head 标记中的

，并移动了：

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

标记后

。

通过这样做我解决了这个问题：

您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

在导航栏中的链接添加了数据 - 无涡轮链接，这是我有地图的页面。这有助于我在所有页面中继续使用turbolinks而不会出现该错误，并且让我在访问该页面时生成地图。

Answer 4

将data-turbolinks-eval=false添加到脚本代码可以解决问题

有关详细信息，请参阅turbolinks gem的停靠栏 https://github.com/turbolinks/turbolinks-classic#evaluating-script-tags

防止谷歌地图JS由Rails Turbolinks多次执行

4 个答案: