PhoneGap + JQuery Mobile + Google Maps v3:地图显示左上图块? [英] PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?

查看：15
本文介绍了PhoneGap + JQuery Mobile + Google Maps v3:地图显示左上图块?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用 JQuery Mobile 在页面之间导航的 PhoneGap 应用程序.

当我从主页导航到包含 Google 地图的页面时，地图一次只在左上角显示一个图块，如下所示:

这可能是什么原因?

**

<块引用>

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

我的主页是这样的

<div data-role="page" id="home">...

<div data-role="page" id="stores"><div data-role="content" id="map_canvas"></div>

我像这样从家导航到地图页面:

，但我也可以向您展示一个工作示例:
工作示例
工作 jsFiddle 示例:http://jsfiddle.net/Gajotres/GHZc8/(Javascript解决方案，CSS 解决方案可以在底部链接中找到).
代码
HTML
<头><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><身体><div data-role="page" id="index"><div data-theme="a" data-role="header"><h3>第一页

<div data-role="content" id="content"><div id="map_canvas" style="height:100%"></div>

<div data-theme="a" data-role="footer" data-position="fixed"><h3>第一页

Javascript

这是一个用于计算正确页面高度的函数:

 $('#map_canvas').css('height',getRealContentHeight());函数 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());}返回 content_height;}

另一种解决方案

这个问题还有另一种解决方案，它只使用 CSS，可以找到 这里.我更喜欢这个解决方案，因为它不需要 javascript 来正确修复地图高度.

CSS:

#content {填充:0；位置:绝对！重要；顶部:40px！重要；右:0;底部:40px！重要；左:0！重要；}

最后一件事

另外，如果页面宽度仍然不正确，只需将其设置为 100%:

$('#map_canvas').css('width', '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 + Google Maps v3:地图显示左上图块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆