我正在编写一个需要地图的 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%... )