0

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

对于地图，我计划使用谷歌地图服务。

为了解释方向的变化，我尝试使用类似的东西：

<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() 被跳过（例如，url 栏可见......）。

甚至没有在“resize(function() {”代码中添加这样的代码：

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

有任何帮助。

更新： 这个问题只发生在我正在测试我的页面的唯一移动设备上——三星 Galaxy Mini (GT-S5570)、Android 2.3.4 (Gingerbread)。在桌面 PC 上调整窗口大小时不会发生这种情况（即：在桌面浏览器上，当浏览器的窗口放大时，map_canvas 会正确填充，即使没有 resize() 绑定，仅由于 map_canvas 上的宽度/高度为 100%... )

4

2 回答 2

0


我在 jquery mobile 中通过 css 为我的地图分配一个大小 我
在 div 中添加 map_canvas ，在这种情况下需要 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-31T17:58:10.637 回答
0

我已经尝试了上述答案（以及许多其他答案），但对我没有任何帮助。实际上，上面的代码对我有用，但直到我开始使用 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-12T13:52:45.033 回答