PhoneGap + JQuery Mobile + Google Maps v3:地图显示左上角的瓷砖？
Min*_*amy 8 android google-maps-api-3 jquery-mobile cordova jquery-mobile-pageshow
我有一个PhoneGap应用程序,它使用JQuery mobile在页面之间导航.
当我从主页面导航到包含Google地图的页面时,地图左上角一次只显示一个图块,如下所示:
这可能是什么原因？
**
源代码: 以下脚本位于我的页面的头部
<script>
$(document).on("pageinit", "#stores", function () {
var centerLocation = new google.maps.LatLng('57.77828', '14.17200');
var myOptions = {
center: centerLocation,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
callback: function () { alert('callback'); }
};
map_element = document.getElementById("map_canvas");
map = new google.maps.Map(map_element, myOptions);
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map, 'resize');
});
</script>
我的页面是这样的
<!-- Home -->
<div data-role="page" id="home">
.
.
.
</div>
<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>
我从家里导航到地图页面,如下所示:
<a href="#stores">Stores</a>
应用Gajotres解决方案后更新瓷砖就像这样
介绍
较新版本的jQuery Mobile和Google Maps v3有点特别.
您的第一个问题是使用pageinit事件进行计算.此时,您无法获得正确的页面高度和宽度.因此,使用pageshow,你会发现它在我的例子中工作.
在显示地图之前,您需要调整其内容DIV的大小.这是因为内容div将根据可用的内部元素调整大小.所以我们需要通过javascript或CSS手动修复它.我已经对这个问题有了一个答案:升级到jquerymobile 1.2后谷歌地图不是全屏,但我也可以给你看一个有效的例子:
工作实例
使用jsFiddle示例:http://jsfiddle.net/Gajotres/GHZc8/(Javascript解决方案,CSS解决方案可以在底部链接中找到).
码
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
使用Javascript
这是一个用于计算正确页面高度的函数:
$('#map_canvas').css('height',getRealContentHeight());
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
另一种方法
这个问题的另一个解决方案只使用CSS,可以在这里找到.我更喜欢这个解决方案,因为它不需要javascript来正确修复地图高度.
CSS:
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
最后一件事
此外,如果页面宽度仍然不正确,只需将其设置为100%:
$('#map_canvas').css('width', '100%');
- 非常感谢在使用代码调整"pageshow"中的地图画布而不是"pageinit"之后,它工作得很好 (2认同)
| 归档时间： |
|
| 查看次数： |
19278 次 |
| 最近记录： |