8

我在官方文档中遵循这些简单的说明：https ://developers.google.com/maps/documentation/javascript/tutorial

当我第一次打开该网站时，一切正常。地图显示正常。问题是当我导航到网站的其他部分时。在我返回地图应该所在的位置后，地图不显示。

这是基本结构：

<ul>
  <li><%= link_to "Home", root_path %></li>
  <li><%= link_to "About",   about_path %></li>
  <li><%= link_to "Contact", contact_path %></li>
</ul>

“联系人”中的 Javascript：

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<h1>Contact</h1>
<p>
  Address & phone number
</p>

<div id="map-canvas" style="width: 35em; height: 35em;"/>

因此，如果我在“主页”页面上打开该站点，然后导航到“联系人”，则没有地图。但是如果我刷新“联系人”站点，就会出现地图。可能是什么问题？

谢谢你。

编辑1：

我试图将我的代码放入准备好的函数中：

$.getScript('https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false');

        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

但是当我这样做时，代码会在这一行中断：

center: new google.maps.LatLng(-34.397, 150.644),
4

6 回答 6

5

您是否使用启用了 turbolinks 的 Rails 4？如果是这样，load当您从主页移动到联系人页面时，该事件不会触发 - 但点击刷新会完全加载整个页面，因此会触发 load 事件。这将与您描述的行为一致。

除了以下行之外，尝试在脚本块的末尾添加它'load'：

google.maps.event.addDomListener(window, 'page:load', initialize);
于 2013-11-04T17:47:54.413 回答
2

只需为初始化谷歌地图的函数提供延迟，它就可以正常工作。

setTimeout(function() {
  //code for initializing the google map
}, 1000);
于 2015-04-16T09:30:44.260 回答
2

将超时设置为六秒对我有用。地图越大，花费的时间就越长，因此请根据地图大小来衡量您的超时时间。

于 2015-08-28T16:34:44.797 回答
1

问题似乎出在您的 turbolinks 上，将您的所有活动绑定在一个函数中，document.ready并在document.page:load事件中调用该函数。

$(document).ready( PageSetupFunction );
$(document).on("page:load", PageSetupFunction );

实际上这里 document.ready 会在你刷新页面时被调用。但是一旦您从另一个链接访问此页面，就会调用 page:load 事件。

于 2013-11-04T17:49:56.573 回答
1

很难说可能出了什么问题。当您说您导航到网站的其他部分时，它们是否都包含在一个 HTML 文件中？或者也许它们是用 AJAX 动态加载的？尝试在地图未正确显示时触发调整大小事件。

google.maps.event.trigger(map, 'resize');

或者，当您“导航”到它应该在但未显示的某个地方之后，可以调用它。

于 2013-11-04T17:46:21.253 回答
1

我已经修复了使用 jQuery 加载页面后触发代码的问题

$(document).on("pageshow","#contact",function(){
  initialize();
});
于 2016-10-19T06:13:28.283 回答