1

レールと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&amp;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 %>

あなたの助けをありがとう、これは私を夢中にさせています!!

4

0 に答える 0