我正在用 rails 和 JQM 构建一个 webapp。地图在我的笔记本电脑和手机上都可以正常显示。问题是当我尝试从智能手机上保存的图标将其作为全屏应用程序启动时:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
地图没有出现,只是一张白色的画布。当我禁用 ajax (data-ajax = false) 但页面在我的浏览器中打开并离开 webapp 时,它可以工作。
我按照以下说明进行操作: gmaps4rails on jQueryMobile don't work。(我不能调用 gmaps4rails(@json, false, false) 因为 gmaps4rails 只接受一个参数...)
这是我的一些代码:
应用程序.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 %>
感谢您的帮助,这让我发疯了!