PhoneGap + JQuery Mobile + Google Maps v3: карта показывает верхние левые плитки?

У меня есть приложение 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 плитки становятся такими

Источник

2 ответа

Решение

вступление

Новые версии jQuery Mobile и Google Maps v3 немного особенные.

Ваша первая проблема заключалась в использовании события pageinit для расчета. В этот момент вы не можете получить правильную высоту и ширину страницы. Так что вместо того, чтобы использовать PageShow, вы увидите, что это работает в моем примере.

Перед тем, как показывать карту, необходимо изменить ее размер в DIV. Это происходит потому, что размер содержимого div будет изменяться в соответствии с доступными внутренними элементами. Поэтому нам нужно исправить это вручную, с помощью JavaScript или CSS. У меня уже есть ответ на этот вопрос: карта Google не открывается в полноэкранном режиме после обновления до 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, и его можно найти ЗДЕСЬ. Я предпочитаю это решение, потому что оно не требует 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-элементов map-canavas не решила всех проблем. google.maps.event.trigger(map, "resize") тоже этого не делал. Карта была теперь на весь экран, но по-прежнему в центре вверху слева. И если бы вы вызывали свои функции инициализации на каждой странице, то карта каждый раз возвращалась бы в исходное положение.

Я смог придумать это, названное на мероприятии в рамках выставки, и решил все свои проблемы!

$('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, затем устанавливает центр карты. Таким образом, если пользователь уходит со страницы и возвращается, карта не теряет свою позицию.

Надеюсь это поможет.

Роберт

Источник
Другие вопросы по тегам