PhoneGap + JQuery Mobile + Google Maps v3:地图显示左上angular的图块?

我有一个PhoneGap应用程序,使用JQuery移动浏览页面。

当我从主页面导航到包含Google地图的页面时,地图在左上angular一次只显示一个图块,如下所示: 在这里输入图像说明

这可能是什么原因?

**

源代码:下面的脚本在我的页面的头部

<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解决scheme后更新瓷砖变成这样 在这里输入图像说明

Solutions Collecting From Web of "PhoneGap + JQuery Mobile + Google Maps v3:地图显示左上angular的图块?"

介绍

新版本的jQuery Mobile和Google Maps v3有点特别。

你的第一个问题是使用pageinit事件来计算。 在这一点上,你不能得到正确的页面高度和宽度。 所以,而不是使用pageshow,你会发现它在我的例子中工作。

在显示地图之前,您需要调整其内容DIV。 这是因为content div会根据可用的内部元素进行调整。 所以我们需要通过javascript或CSS来手动修复。 我已经在这个问题上有一个答案: 升级到jquerymobile 1.2后谷歌地图不是全屏,但我也可以告诉你一个工作的例子:

工作示例

工作jsFiddle的例子: http : //jsfiddle.net/Gajotres/GHZc8/ (Javascript解决scheme,CSS解决scheme可以在底部链接中find)。

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; } 

解决scheme

还有另一个解决这个问题,只使用CSS,它可以在这里find。 我更喜欢这个解决scheme,因为它不需要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%'); 

几个月来,我已经遇到过这个问题,我正在试图find一个解决scheme。 即使设置内容和地图,canavas风格属性divs并没有解决所有的问题。 google.maps.event.trigger(map,“resize”)也没有做到这一点。 地图现在是全屏,但仍然居中左上angular。 如果您在每次页面显示时调用初始化函数,那么每次都会将地图重置回原始位置。

我能够在页面展示事件中提出这个问题,解决了我所有的问题!

 $('map-page').on("pageshow", function() { var latLng = map.getCenter(); google.maps.event.trigger(map,'resize'); map.setCenter(latLng); }); 

CSS

 <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } .ui-page { -webkit-backface-visibility: hidden; } </style> 

这是我的内容和地图canvas的div。

 <div data-role="content" id="mapContent" style="padding:0;position:absolute; top:40px;right:0px;bottom:60px;left:0px; "> <div id="map-canvas" style="width:100%;" > </div> </div><!-- /Content --> 

它获取当前的地图中心,将地图大小调整为当前div,然后设置地图中心。 这样,如果用户离开页面并返回,地图不会丢失其位置。

希望这可以帮助。

罗伯特