Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图仅在“之后加载”；刷新“；

Javascript 谷歌地图仅在“之后加载”；刷新“；

javascript ruby-on-rails google-maps coffeescript

Javascript 谷歌地图仅在“之后加载”；刷新“；,javascript,ruby-on-rails,google-maps,coffeescript,Javascript,Ruby On Rails,Google Maps,Coffeescript,我的Rails 4应用程序运行咖啡脚本来绘制谷歌地图。乍一看，它似乎不起作用。然而，当我点击浏览器刷新按钮时，地图像冠军一样加载。这已经过测试，并且正在进行： 移动Safari（iOS7） 桌面Safari（OSX） 铬（OSX） Chrome（Windows 7） application.html.erb中的标题 <head> <!-- Boilerplate --> <meta charset="utf-8"> <meta

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

  • 移动Safari（iOS7）
  • 桌面Safari（OSX）
  • 铬（OSX）
  • Chrome（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>

<div id="map-canvas"/>
locations.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

#将与匹配控制器相关的所有行为和挂钩放在此处。
#所有这些逻辑将自动在application.js中可用。
#您可以在此文件中使用CoffeeScript：http://coffeescript.org/
初始化=->
地图选项=
中心：新google.maps.LatLng（33.51976，-101.95781）
缩放：16
mapTypeId:google.maps.mapTypeId.ROADMAP
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）
myLatlng=new google.maps.LatLng（33.51976，-101.95781）；
marker=新的google.maps.marker(
位置：myLatlng
地图：地图
标题：“你好，世界！”
)
contentString=“”+”威盛华盛顿神奇高速公路“+”
    “+”
  • 6506德克萨斯州卢伯克82街79424号”+“
  • 806.553.0722”+”
  • 8:00am-9:00pm
    • “+”
“+”r
infowindow=新建google.maps.infowindow（内容：contentString）
google.maps.event.addListener标记，“单击”，->
infowindow.open地图、标记
信息窗口。打开（地图、标记）
google.maps.event.addDomListener窗口，“加载”，初始化
locations/index.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>

<div id="map-canvas"/>
这听起来很像。建议的解决方案是用以下内容包装您的咖啡脚本：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
这听起来很像。建议的解决方案是用以下内容包装您的咖啡脚本：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
这是一个复杂的问题，在Rails 4中使用Turbolinks时与javascript缓存有关（默认情况下，Turbolinks现在对所有内部链接都启用）

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

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

链接到“地图”，映射路径，“数据无涡轮链接”=>true

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

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

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

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

链接到“地图”，映射路径，“数据无涡轮链接”=>true

Turbolinks似乎是Rails的一个有争议的附加组件，如果您不关心它提供的性能改进，您可以在全球范围内关闭它。

最简单的修复方法

在用于访问地图页面的链接上，只需添加数据no turbolink

例如：

<a href="/contactuspage" data-no-turbolink>Contact Us</a>
问题解决了！我花了几天的时间试图找到一个解决这个问题的简单方法。希望有帮助

最简单的修复方法

在用于访问地图页面的链接上，只需添加数据no turbolink

例如：

<a href="/contactuspage" data-no-turbolink>Contact Us</a>
问题解决了！我花了几天的时间试图找到一个解决这个问题的简单方法。希望有帮助

为Philip Duffney的回答添加了一些建议：

如果其他任何操作都不起作用，请向指向目标页面的链接添加值“data:{no_turbolink:true}”

例如：

<%= link_to(locations, data: { no_turbolink: true } ) do %>
为Philip Duffney的回答添加一些建议：

如果其他任何操作都不起作用，请向指向目标页面的链接添加值“data:{no_turbolink:true}”

例如：

<%= link_to(locations, data: { no_turbolink: true } ) do %>
只需在关闭头部标签之前添加此代码即可。或添加到主题->自定义脚本部分：

jQuery（document.trigger（'gmpBeforePrepareToDraw'）

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


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


jQuery（document.trigger（'gmpBeforePrepareToDraw'）

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

问候