レールとJQMを使用してWebアプリを構築しています。マップは私のラップトップと私の電話でうまく表示されます。問題は、スマートフォンに保存されているアイコンからフルスクリーンアプリとして起動しようとしたときです。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
マップは表示されず、白いキャンバスだけが表示されます。ajax(data-ajax = false)を無効にすると機能しますが、ページがブラウザーで開かれ、Webアプリを終了します。
次の手順に従いました: jQueryMobileのgmaps4railsが機能しません。(gmaps4railsは1つのパラメーターしか受け入れないため、gmaps4rails(@json、false、false)を呼び出すことができませんでした...)
これが私のコードの一部です:
application.js:
//= require jquery
//= require jquery_ujs
//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps
//= require_tree .
$('#gmaps').live('pageshow',function(event){
Gmaps.loadMaps();
});
レイアウト:
<%= javascript_include_tag "http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" %>
<%= javascript_include_tag "application" %>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<%= stylesheet_link_tag "https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css", :media => "all" %>
<%= stylesheet_link_tag "application", :media => "all" %>
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable=no>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
見る:
<%= gmaps4rails(@markers_json) %>
<%= yield :scripts %>
あなたの助けをありがとう、これは私を夢中にさせています!!