Question

我正在编写一个需要地图的jquery移动应用程序。

对于地图，我打算使用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 resize（）（例如，网址栏可见......）。

甚至没有添加“resize（function（）{”这样的代码：

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

有任何帮助。

更新： 这个问题只发生在我正在测试我的页面的唯一移动设备上 - 三星Galaxy Mini（GT-S5570），Android 2.3.4（Gingerbread）。在桌面PC上调整窗口大小时会发生 not （即：在桌面浏览器上map_canvas在浏览器窗口被放大时正确填充，即使没有resize（）绑定，也只是由于宽度/高度map_canvas上的100％...）

Answer 1

我通过css将大小分配给jquery mobile中的地图
我将div中的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>

Answer 2

我已经尝试过上述答案（加上许多其他人），对我来说没有任何作用。实际上，上面的代码对我有用，但直到我开始使用jQuery Mobile。不知何故，当我加载jQuery Mobile时（有趣的是，我注意到它是JS，没有CSS）map_canvas没有高度（检查元素高度的技巧是为它添加边框，如{{ 1}}）。

最后，我设法通过使用以下代码/ css解决了方向更改时的自动调整大小：

border: 1px solid red;

在css中：

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

所以，基本上：html, body, #pageID { height: 100%; margin: 0; padding: 0; } .ui-content { padding: 0; } .ui-content, .ui-content #map_canvas { height: inherit; /* the trick */ }为我解决了问题。

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

我希望它有所帮助！

谷歌地图与jquery.mobile：如何正确调整地图画布？

2 个答案: