Google地圖僅在“刷新”后加載
[英]Google map only loads after “refresh”
問題描述
My Rails 4應用程序運行coffee腳本以繪制Google地圖。 乍一看，它似乎不起作用。 但是，當我按下瀏覽器的“刷新”按鈕時，地圖加載得像個冠軍。 這已經過測試，並且正在發生：
- 移動Safari（iOS7）
- 桌面Safari（OSX）
- Chrome（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>
application.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 .
location.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
location / index.html.erb
<div id="map-canvas"/>
5 個解決方案
解決方案1
6 已采納 2013-10-04 16:54:11
這聽起來很像Rails javascript，只有在重新加載后才能工作 。 建議的解決方案是用以下代碼包裝您的coffeescript：
ready = ->
// functions
$(document).ready(ready)
$(document).on('page:load', ready)
解決方案2
4 2015-03-16 23:47:28
最簡單的修復！
在用於訪問地圖頁面的鏈接上，只需添加data-no-turbolink
例：
<a href="/contactuspage" data-no-turbolink>Contact Us</a>
問題解決了！ 我花了幾天時間試圖找到解決這個問題的簡單方法。 希望能幫助到你！
解決方案3
1 2014-05-28 17:50:17
這是一個復雜的問題，在Rails 4中使用Turbolinks時，需要做一些有關JavaScript緩存的工作（默認情況下，所有內部鏈接都已啟用Turbolinks）。
您可以通過在指向此頁面的鏈接中指定'data-no-turbolink' => true來強制加載沒有turbolinks的特定URL。
例如，我使用gmaps4rails插件遇到了這個問題，並通過確保使用以下網址鏈接到地圖頁面來解決了該問題：
link_to 'Map', maps_path, 'data-no-turbolink' => true
一般來說，Turbolinks似乎是對Rails的有爭議的補充，如果您不關心它提供的性能改進，可以在全球范圍內將其關閉。
解決方案4
0 2015-05-21 10:41:08
在Philip Duffney的回應中添加了一些建議：
如果其他方法不起作用，則將值'data：{no_turbolink：true}'添加到鏈接，該鏈接將導致目標頁面。
例：
<%= link_to(locations, data: { no_turbolink: true } ) do %>
解決方案5
-1 2015-10-30 07:52:25
只需在關閉head標簽之前添加此代碼即可。 或添加主題->“自定義腳本”部分：
jQuery(document).trigger('gmpBeforePrepareToDraw');
現在您的地圖已正確加載。 您無需再次刷新。 :)
問候
Google地圖僅在刷新后出現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.