8

我有一个 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 解决方案后更新 瓷砖变成这样 在此处输入图像描述

4

2 回答 2

9

介绍

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

您的第一个问题是使用 pageinit 事件进行计算。那时您无法获得正确的页面高度和宽度。因此，请改用 pageshow，您会发现它在我的示例中有效。

在显示地图之前，您需要调整其内容 DIV 的大小。这是因为内容 div 将根据可用的内部元素调整大小。所以我们需要手动修复这个问题，通过 javascript 或 CSS。我已经对这个问题有了答案：升级到 jquerymobile 1.2 后，google map not full screen但我也可以向您展示一个工作示例：

工作示例

工作 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%');
于 2013-04-16T13:50:03.650 回答
0

几个月来，我一直在努力寻找解决方案。即使为 content 和 map-canavas div 设置样式属性也不能解决所有问题。google.maps.event.trigger(map, "resize") 也没有这样做。地图现在是全屏的，但仍位于左上角的中心。而且，如果您在每个 pageshow 上调用您的初始化函数，则地图每次都会重置回其原始位置。

我能够在 pageshow 事件中提出这个调用并解决了我所有的问题！

$('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>

这是我的内容和地图画布 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，然后设置地图中心。这样，如果用户离开页面并返回，地图不会丢失其位置。

希望这可以帮助。

罗伯特

于 2014-09-03T06:53:05.043 回答