Google地图与jquery.mobile：如何正确调整地图画布的大小？

我正在写一个需要地图的jquery移动应用程序。Google地图与jquery.mobile：如何正确调整地图画布的大小？

对于地图我计划使用Google地图服务。

为了考虑方向的变化，我试图用这样的：

<script> 
$('#page-map').live('pagecreate', function(event) { 
    var map = $('#map_canvas').gmap({ 
     ... 
    }); 
    ... 
    $(window).resize(function() { 
     $('#map_canvas').width($(window).width()); 
     $('#map_canvas').height($(window).height()); 
    }); 
)}; 
</script>

问题：这段代码正确调整大小时，该设备被旋转的地图画布，但它看起来像jQuery Mobile的调整大小（）是跳过（网址栏可见，例如...）。

即使不添加到“调整（函数（）{”的代码是这样的：

google.maps.event.trigger(map, 'resize');

是任何帮助

更新： 问题只发生在仅移动设备我正在测试我的页面 - 一个三星Galaxy Mini（GT-S5570），Android 2.3.4（姜饼）。它确实不是发生在桌面PC上调整窗口大小时（即：在桌面浏览器map_canvas是正确的当浏览器的窗口放大时填充，即使没有È调整大小（）结合，只由于在上map_canvas提供100％的宽度/高度...）

来源

2012-08-31 MarcoS

我通过CSS分配一个大小到我的地图中的jquery移动
我添加map_canvas提供内分度dimencion deuin想在这种情况下，100％

CSS

#map_content { 
padding: 0px; 
width: 100%; 
height: 100%; 
overflow: hidden;} 


#map_canvas { 
width: 100%; 
height: 100%; 
padding: 0; 
text-shadow: none;}

HTML

  <div data-role="content" id="map_content" data-theme="a"> 
      <div id="map_content"> 
       <div id="map_canvas"></div> 
      </div> 
     </div>

来源

2012-08-31 17:58:10

如果当窗口大小发生变化时（例如，因为设备将方向从纵向更改为横向），您不调整#map_canvas的大小，地图将不会填充地理数据，窗口右侧会留下空白条带... – MarcoS

对不起：您是否使用移动设备？如果是这样，CSS如果足以让您在方向更改时填充map_canvas（并且隐藏了url栏）？如果是这样，我可以问一下我们的设备（iPhone/Blackberry/Android/...）吗？ – MarcoS

我试过上面的答案（加上其他许多），没有为我工作。实际上，上面的代码为我工作，但直到我开始使用jQuery Mobile。不知何故，当我加载jQuery Mobile（有趣的是，我注意到它是JS，没有CSS），map_canvas没有高度（检查元素高度的技巧是像border: 1px solid red;那样添加边框）。

最终，我成功地解决了自动调整大小时，通过使用下面的代码/ CSS的方向变化：

<div data-role="page" id="pageID"> 
    <div role="main" class="ui-content"> 
     <div id="map_canvas"> 
     </div> 
    </div> 
</div>

并在CSS：

html, 
body, 
#pageID { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.ui-content { 
    padding: 0; 
} 
.ui-content, 
.ui-content #map_canvas { 
    height: inherit; /* the trick */ 
}

所以，基本上是： height: inherit;为我解决了这个问题。

现金https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250

我希望它能帮助！

来源

2015-04-12 13:52:45

Google地图与jquery.mobile：如何正确调整地图画布的大小？

回答

相关问题