本文介绍了升级到jquerymobile 1.2后谷歌地图不全屏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下示例属于 Tolis Emmanouilidis ，适用于jquerymobile 1.0.1。当我想升级到1.2.0时，地图不是全屏，只有一部分显示在框架的左上角。
互联网充满了jquerymobile和google地图的例子。升级到jqm 1.2.0之后地图有这个问题，而且这个题目没有太多的资料。
你能帮我解决这个问题吗？
jsfiddle/jCemG/4/
<！DOCTYPE html> < html> < head> < title>页面标题< / title> < meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/> < link rel =stylesheethref =code.jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.css/> < script type =text / javascriptsrc =code.jquery/jquery-1.8.2.min.js>< / script> < script type =text / javascriptsrc =code.jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.js>< /脚本> < script type =text / javascriptsrc =maps.google/maps/api/js?v=3&sensor=false&language=el> < /脚本> < / head> < body> <！ - - / page - > < div data-role =pageclass =page-mapstyle =width：100％; height：100％;> <！ - / header - > < div data-role =headerdata-theme =b> < h1>地图< / h1> < / div> <！ - / content - > < div data-role =contentclass =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> < div id =map_canvasstyle =height：350px;>< / div> < / div> < / div> < / body> < / html>解决方案
这应该解决您的问题：
$ （'＃map'）。live（'pagebeforeshow'，function（e，data）{ $（'＃map_canvas' ）.height（$（window）.height（） - （10 + $（'[data-role = header]'）。height（） - $（'[data-role = footer]'）。height（）） ）; }）;
Below example belongs Tolis Emmanouilidis and is for jquerymobile 1.0.1 . when i want to upgrade it to 1.2.0, map isn't full screen in frame, only a part of it is shown on top-left corner of frame
Internet is full of example with jquerymobile and google maps. after upgrade to jqm 1.2.0 maps have this problem and not much source on this topic.
Can you help me to solve this issue?
jsfiddle/jCemG/4/
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="code.jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script type="text/javascript" src="code.jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="code.jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="maps.google/maps/api/js?v=3&sensor=false&language=el"> </script> </head> <body> <!-- /page --> <div data-role="page" class="page-map" style="width:100%; height:100%;"> <!-- /header --> <div data-role="header" data-theme="b"> <h1>Map</h1> <a href="page_1_intro.html" id="home" rel="external" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Home</a> </div> <!-- /content --> <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px;"></div> </div> </div> </body> </html>解决方案
This should solve your problem:
$('#map').live('pagebeforeshow',function(e,data){ $('#map_canvas').height($(window).height() - (10 + $('[data-role=header]').height() - $('[data-role=footer]').height())); });
更多推荐
升级到jquerymobile 1.2后谷歌地图不全屏
发布评论