PhoneGap + JQuery Mobile + Google Maps v3：地图显示左上角的瓷砖？ [英] PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?
问题描述
我有一个使用JQuery移动在页面之间导航的PhoneGap应用程序。
I have a PhoneGap application that uses JQuery mobile to navigate between pages.
当我从主页导航到包含Google地图的页面时，在左上角只有一个图块，如下所示：
When I navigate from the main page to a page containing a Google map, the map shows only a single tile at a time in the top left corner like this:
可能是什么原因？
**
源代码：
以下脚本在我的页面头
Source Code: The following script is in the head of my page
<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>
我从主页导航到地图页面，如下所示：
I navigate from home to the maps page like this:
<a href="#stores">Stores</a>
更新
Gajotres解决方案的瓷砖变成这样
Update after applying Gajotres solution the tiles become like this
推荐答案
intro
jQuery Mobile和Google Maps v3的新版本有点特别。
intro
Newer versions of jQuery Mobile and Google Maps v3 are a little bit special.
你的第一个问题是使用pageinit事件来计算。此时，您无法获得正确的页面高度和宽度。
Your first problem was using pageinit event to the the calculation. At that point you cant get a correct page height and width. So instead use pageshow, you will find it working in my example.
在显示地图之前，您需要调整其内容DIV的大小。这是因为内容div将根据可用的内部元素调整大小。所以我们需要通过javascript或CSS手动修复。我已经对这个问题有答案： google map not full screen after upgrade to jquerymobile 1.2 但我也可以向您展示一个工作示例：
Before you show the map you need to resize its content DIV. This is because content div will resize according to available inner elements. So we need to fix this manually, through javascript or CSS. I already have a answer on that question: google map not full screen after upgrade to jquerymobile 1.2 but I can also show you a working example:
工作jsFiddle示例： http://jsfiddle.net/Gajotres/GHZc8/
Working jsFiddle example: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript solution, CSS solution can be found in a bottom link).
<!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
计算正确的页面高度：
Javascript
Here's a function used to calculate correct page height:
$('#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来正确修正地图高度。
Another solution
There's also another solution to this problem that only uses CSS and it can be found HERE. I prefer this solution cause it don't require javascript to correctly fix the map height.
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
最后一件事
如果页面宽度仍然不正确，只需将其设置为100％：
One last thing
Also if page width is still incorrect just set it to 100%:
$('#map_canvas').css('width', '100%');
这篇关于PhoneGap + JQuery Mobile + Google Maps v3：地图显示左上角的瓷砖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
