Question

我是Rails的新手，无法理解为什么我的地图无法显示。我的来源为here，目前托管here用于测试目的。

当我加载home page并点击联系页面的按钮时，Google地图将不会显示。但是，如果我访问联系页面directly，地图将加载正常。在我正确加载地图一次后，我可以点击网站并保留地图（缓存？）。

我找到了很多有类似问题的用户，其中一些用$（document）.on（'pageinit'，function（）....样式声明修复，但是这个和其他变种似乎从jquery 1.9开始deprecated。

其他用户说他们能够通过将“rel ='external'”附加到他们的导航栏链接来解决问题，但由于我已经使用urlhelper生成了导航栏，这对我来说似乎不是一个选项

代替“简单”修复，我能够使用我的页面控制器简单地强制页面刷新吗？

应用/资产/ Javascript角/ contact_map.js

var map;
$(document).ready(function initialize() {
  var bjlLoc = new google.maps.LatLng(40.7547655,-73.8048775);
  var mapOptions = {
    center: bjlLoc,
    zoom: 13
  };
  map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: bjlLoc,
    title: 'B.J. Laura & Son',
    map: map
  });
});

$(document).ready(function() {
  google.maps.event.trigger(map, 'resize');
});

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

应用/资产/样式表/ pages.scss

#contact-info{
  float: left;
  width: 300px;
}

#map-container{
  border: none;
  width: 650px;
  height: 400px;
  background-color: #ccc;
  margin-left: 325px;
  margin-right: 25px;
}

#mapcanvas{
  border: none;
  width: 650px;
  height: 400px;
}

应用/视图/布局/ application.html.erb

<!DOCTYPE html>
<html>
<head>
  <%= yield :head %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

</head>
<body id="bdycontainer">
  <canvas id="blogo" width="1000" height="120">...</canvas>
  <nav>
    <ul id="navbar">
      <% [["Home", :root], ["About", :about], ["Contact", :contact]].each do |name,url| %>
      <li><%= link_to_unless_current(name, url) %></li>
    <% end %>
    </ul>
  </nav>
  <div id="content">
    <%= yield %>
  </div>

</body>
</html>

应用/视图/页/ contact.html.erb

<% content_for :head do %>
  <title>Contact B.J. Laura</title>
  <script src="https://maps.googleapis.com/maps/api/js"></script>

<% end %>

<br/>
<div id="contact-info">...</div>

<div id="map-container">
  <div id="mapcanvas"></div>
</div>

<br/>
<hr>

Answer 1

'data-turbolinks-track' => true实际上是导致此问题。关闭data-trubolinks-track以使用Google Maps API，而无需刷新页面。

通过Rails urlhelper生成的链接

1 个答案: