PhoneGap的+ jQuery Mobile的+谷歌地图V3：地图显示左上瓷砖？ [英] PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?

问题描述

我有一个使用jQuery Mobile的页面之间进行导航一个PhoneGap的应用程序。

当我从主网页包含一个谷歌地图的网页浏览，地图上只显示了一个平铺在左上角这样的时刻：

什么是原因？

**

  

来源$ C ​​$ C：   下面的脚本是在我的网页的头

 ＆LT;脚本＆GT;
            $（文件）。在（pageinit，#stores，函数（）{
                VAR centerLocation =新google.maps.LatLng（'57 0.77828'，'14 0.17200'）;

        VAR myOptions = {
            中心：centerLocation，
            变焦：8，
            mapTypeId：google.maps.MapTypeId.ROADMAP，
            回调：函数（）{警报（'回调'）; }
        };

        map_element =的document.getElementById（map_canvas提供）;




        地图=新google.maps.Map（map_element，myOptions）;

        变种mapwidth = $（窗口）.WIDTH（）;
        变种mapheight = $（窗口）.height（）;
        $（＃map_canvas提供）高度（mapheight）;
        $（＃map_canvas提供）宽（mapwidth）;
        google.maps.event.trigger（地图，'调整'）;

            }）;
        ＆LT; / SCRIPT＆GT;
 

我的网页是这样的

 ＆LT;！ - 首页 - ＆GT;
        ＆LT; D​​IV数据角色=页面ID =家＆GT;
。
。
。
＆LT; / DIV＆GT;

＆LT; D​​IV数据角色=页面ID =专卖店＆GT;
＆LT; D​​IV数据角色=内容ID =map_canvas提供＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我从家里导航地图页面是这样的：

 ＆LT; A HREF =＃专卖店＆GT;商店＆LT; / A＆GT;
 

  

更新   应用Gajotres解决方案后，瓷砖变成这个样子   

解决方案

简介

新版本的jQuery Mobile和谷歌地图V3是有点特别。

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

在你告诉你需要调整其内容的DIV地图。这是因为内容的div会根据现有的内部元素调整。因此，我们需要手动解决这一问题，通过JavaScript或CSS。我已经对这个问题一个答案：<一href="http://stackoverflow.com/questions/13823556/google-map-not-full-screen-after-upgrade-to-jquerymobile-1-2">google地图不是全屏升级后jquerymobile 1.2 但是我也可以告诉你一个工作的例子：

工作的例子

工作的jsfiddle例如： http://jsfiddle.net/Gajotres/GHZc8/ （JavaScript的解决方案，CSS的解决方案可在底部的链接找到）。

code

HTML

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
    ＆LT;冠军＆GT; JQM复杂演示＆LT; /标题＆GT;
    ＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1/＆GT;
    ＆LT;链接相对=样式表的href =HTTP：//$c$c.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://maps.google.com/maps/api/js?sensor=true＆GT;＆LT; / SCRIPT＆GT;
    ＆所述;脚本的src =的http：//$c$c.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js＆GT;＆所述; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; D​​IV数据角色=页面ID =指数＆GT;
        ＆所述;股利数据主题=一个数据角色=头＆GT;
            ＆LT; H3＆GT;
                第一页
            ＆LT; / H3＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; D​​IV数据角色=内容ID =内容＆GT;
            ＆LT; D​​IV ID =map_canvas提供风格=HEIGHT：100％＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆所述;股利数据主题=一个数据角色=页脚的数据位=固定＆GT;
            ＆LT; H3＆GT;
                第一页
            ＆LT; / H3＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
 

的Javascript

下面是用于计算正确的页面高度的函数：

  $（'＃map_canvas提供'）的css（高度，getRealContentHeight（））。

功能getRealContentHeight（）{
    VAR标题= $ .mobile.activePage.find（DIV [数据角色='头']：可见）;
    VAR页脚= $ .mobile.activePage.find（DIV [数据角色='页脚']：可见）;
    VAR内容= $ .mobile.activePage.find（DIV [数据角色='内容']：可见：可见）;
    变种viewport_height = $（窗口）.height（）;

    变种content_height = viewport_height  -  header.outerHeight（） -  footer.outerHeight（）;
    如果（（content.outerHeight（） -  header.outerHeight（） -  footer.outerHeight（））≤; = viewport_height）{
        content_height  -  =（content.outerHeight（） -  content.height（））;
    }
    返回content_height;
}
 

的另一个解决方案

还有另一个解决这个问题，即只使用CSS和可以发现的 <一href="http://www.gajotres.net/using-google-maps-javascript-api-v3-with-jquery-mobile/">HERE.我preFER这种解决方案的原因它不需要JavaScript才能正确修正地图的高度。

CSS：

 ＃内容{
    填充：0;
    位置：绝对重要的;！
    顶部：40PX重要;
    右：0;
    ！底：40PX重要;
    左：0重要;！
}
 

最后一件事

此外，如果页面宽度仍是不正确只是其设置为100％：

  $（'＃map_canvas提供'）的CSS（'宽'，'100％'）;
 

I have a PhoneGap application that uses JQuery mobile to navigate between pages.

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:

What can be the reason for 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>

My Page is like this

<!-- 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>

Update after applying Gajotres solution the tiles become like this

解决方案

intro

Newer versions of jQuery Mobile and Google Maps v3 are a little bit special.

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.

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:

Working example

Working jsFiddle example: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript solution, CSS solution can be found in a bottom link).

Code

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

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

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.

CSS:

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

One last thing

Also if page width is still incorrect just set it to 100%:

$('#map_canvas').css('width', '100%');

这篇关于PhoneGap的+ jQuery Mobile的+谷歌地图V3：地图显示左上瓷砖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！