Tho*_*lor 14 javascript google-maps ruby-on-rails turbolinks
我目前正在处理Rails应用程序,它收到以下错误:
您已在此页面上多次添加Google Maps API.这可能会导致意外错误.
经过一番研究后,我发现Turbolinks造成了这个问题.当link_to点击全部由谷歌地图创建的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 %>
Jos*_*nos 10
而不是<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.
添加data-turbolinks-eval="false"到脚本标签将告诉 turbolinks 不要重新评估它。
<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" data-turbolinks-eval="false"></script>
见https://github.com/turbolinks/turbolinks#working-with-script-elements
在我们的案例中工作，我们所有的脚本标签都在<head>根据 turbolinks 文档。
小智 1
我也遇到过同样的问题，不幸的是，几个月后这可能对你没有帮助。
我搬家了：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>
在 <%= csrf_meta_tags %> 之后的头标记中，并移动了：
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
在/body标签之后。
通过这样做，我解决了这个问题：
您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。
将 data-no-turbolink 添加到导航栏中的链接，即我有地图的页面。这帮助我在所有页面中继续使用涡轮链接而没有出现该错误，并且让我在访问该页面时生成地图。
| 归档时间： |
|
| 查看次数： |
3476 次 |
| 最近记录： |