1

我的 Rails 4 应用程序运行咖啡脚本来绘制谷歌地图。乍一看，它似乎不起作用。但是，当我点击浏览器的刷新按钮时，地图会像冠军一样加载。这已经过测试并发生在：

  • 移动 Safari (iOS7)
  • 桌面 Safari (OSX)
  • 铬 (OSX)
  • 铬（Windows 7）

来自 application.html.erb 的标头

<head>
    <!-- Boilerplate -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <%= stylesheet_link_tag "normalize.min.css" %>
    <%= stylesheet_link_tag "main.css" %>
    <%= javascript_include_tag "vendor/modernizr-2.6.2-respond-1.1.0.min.js" %>

    <!-- Icon Font -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

    <!-- Google Maps API -->
    <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=*********&sensor=true" %>

    <!-- Rails -->
    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'>
</head>

应用程序.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .

位置.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

initialize = ->
    mapOptions =
        center: new google.maps.LatLng(33.51976, -101.95781)
        zoom: 16
        mapTypeId: google.maps.MapTypeId.ROADMAP

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)

    myLatlng = new google.maps.LatLng(33.51976, -101.95781);
    marker = new google.maps.Marker(
        position: myLatlng
        map: map
        title: "Hello World!"
    )

    contentString = "<div id=\"info_content\">" + "<h3>Mighty Wash Amazing Autobath</h3>" + "<ul>" + "<li>6506 82nd Street, Lubbock, Texas 79424</li>" + "<li>806.553.0722</li>" + "<li>8:00am - 9:00pm</li>" + "</ul>" + "</div>"r
    infowindow = new google.maps.InfoWindow(content: contentString)

    google.maps.event.addListener marker, "click", ->
        infowindow.open map, marker

    infowindow.open(map, marker)

google.maps.event.addDomListener window, "load", initialize

位置/index.html.erb

<div id="map-canvas"/>
4

5 回答 5

6

这听起来很像Rails javascript 仅在 reload 之后才有效。建议的解决方案是将您的咖啡脚本包装为：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
于 2013-10-04T16:54:11.557 回答
4

最简单的修复！

在用于访问带有地图的页面的链接上，只需添加data-no-turbolink

例子：

<a href="/contactuspage" data-no-turbolink>Contact Us</a>

问题解决了！我花了几天时间试图找到一个简单的解决方案来解决这个问题。希望能帮助到你！

于 2015-03-16T23:47:28.460 回答
1

这是一个复杂的问题，在 Rails 4 中使用 Turbolinks 时与 javascript 缓存有关（Turbolinks 现在默认为所有内部链接启用）。

'data-no-turbolink' => true您可以通过在指向此页面的链接中指定来强制加载特定的 url，而不使用 turbolinks 。

例如，我使用 gmaps4rails 插件遇到了这个问题，并通过确保我使用以下 url 链接到地图页面来解决它：

link_to 'Map', maps_path, 'data-no-turbolink' => true

一般来说，Turbolinks 似乎是 Rails 的一个有争议的补充，如果你不关心它提供的性能改进，你可以全局关闭它。

于 2014-05-28T17:50:17.133 回答
0

为 Philip Duffney 的回应添加一点建议：

如果其他任何方法都不起作用，请将值 'data: { no_turbolink: true }' 添加到指向目标页面的链接。

例子：

<%= link_to(locations, data: { no_turbolink: true } ) do %>
于 2015-05-21T10:41:08.303 回答
-1

只需在关闭 head 标签之前添加此代码。或添加您的主题 -> 自定义脚本部分：

jQuery(document).trigger('gmpBeforePrepareToDraw');

现在您的地图已正确加载。你不需要再次刷新它。:)

问候

于 2015-10-30T07:52:25.843 回答