PhoneGap + JQuery Mobile + Google Maps v3：地图显示左上角瓷砖？

Posted 2023-05-06

技术标签:

【中文标题】PhoneGap + JQuery Mobile + Google Maps v3：地图显示左上角瓷砖？【英文标题】：PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles? 【发布时间】：2013-04-08 22:44:34 【问题描述】：

我有一个 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 解决方案后，瓷砖变成这样

【问题讨论】：

向我们展示您的 javascript 和 html 代码。 ***.com/questions/13823556/… 我添加了代码，请查看修改后的问题我自己也遇到过类似的问题。我发现当页面初始化时，地图会根据它认为当前可用的大小来调整大小，但如果你以后让它可见，它不会自动调整大小。 google.maps.event.trigger(map, "resize"); 应该为您做类似的事情，但是当您使地图可见时您必须调用它。 【参考方案1】：

简介

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

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

在显示地图之前，您需要调整其内容 DIV 的大小。这是因为内容 div 将根据可用的内部元素调整大小。所以我们需要手动修复这个问题，通过 javascript 或 CSS。我已经对这个问题有了答案：google map not full screen after upgrade to 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，可以在 HERE 找到。我更喜欢这个解决方案，因为它不需要 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%');

【讨论】：

尝试了您的解决方案，问题仍然存在，但磁贴更大。还能是别的吗？您为什么不在示例中尝试我的解决方案。如果我的解决方案也不起作用，那么问题就出在其他地方。好的，再次测试，地图似乎适合窗口，但每当我触摸地图时，它仍然显示一个图块，如附图中所示我想我理解你的问题。您将其附加到不正确的 div 中。不要像这样将它附加到 data-role="content" div：而是在其中创建另一个 div，如下所示：。基本上，您正在与 jQuery Mobile 争夺内容 div 尺寸。非常感谢它在使用您的代码在“pageshow”而不是“pageinit”中调整地图画布大小后起作用【参考方案2】：

几个月来，我一直在努力寻找解决方案。即使为 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，然后设置地图中心。这样，如果用户离开页面并返回，地图不会丢失其位置。

希望这会有所帮助。

罗伯特

【讨论】：

以上是关于PhoneGap + JQuery Mobile + Google Maps v3：地图显示左上角瓷砖？的主要内容，如果未能解决你的问题，请参考以下文章

jQuery Mobile 打破了 Phonegap deviceready 事件

iPhone上的jQuery Mobile + PhoneGap无法加载页面

Jquery (Mobile) 和 phonegap 存储模块不同步

一起使用 JQuery-Mobile/Phonegap 的正确方法？

在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）

带有 phonegap 的 Jquery mobile 不适用于移动应用程序