OpenLayers не будет загружаться без двойного щелчка в приложении PhoneGap / jQuery Mobile - PullRequest
Новая
       35

OpenLayers не будет загружаться без двойного щелчка в приложении PhoneGap / jQuery Mobile

0 голосов
/ 19 января 2012

У меня возникают проблемы при попытке интегрировать базовую карту OL со слоем Open Street Map в многостраничный интерфейс jQuery Mobile HTML - он может найти карту 'div' и загружает почти все правильно, но элемент управления имеетчтобы быть нажатым до загрузки плитки карты.Вот код карты: 

var map, layer;
function init(){
    map = new OpenLayers.Map( 'map');
    layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
    map.addLayer(layer);
    map.setCenter(
        new OpenLayers.LonLat(-71.147, 42.472).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
            ), 12
        );
}

Эта функция вызывается с помощью события 'ondeviceready', которое срабатывает, когда PhoneGap готов принимать команды.Это страница, которая содержит карту: 

<!-- page showing map of route being recorded. -->
<div id="route" data-role="page">
    <div data-id="recRoute" data-role="header" data-position="fixed">
    </div>
    <div data-role="content">
        <div id="map"></div>
    </div>
    <div data-id="recRouteFoot" data-role="footer" data-position="fixed">
    </div>
</div>

Есть ли какой-нибудь способ заставить карту / слой перерисовываться при загрузке страницы в DOM?Я бы предпочел, чтобы пользователю не приходилось нажимать на элементы управления картой, чтобы увидеть карту.

ОБНОВЛЕНИЕ: обработчик pageinit для страницы маршрута: 

/** Executes when gps page loads. **/
$('#route').live('pageinit', function(event){
        $('.del').detach().trigger('create');
        /** Executes when addTag button clicked. **/
        $('#createTag').click(createTag);
        /** Executes when getPic button clicked. **/
        $('#getPic').click(function() {
                getPic();
        });
        /** Executes when pauseResume button clicked. **/
        $('.pauseResume').click(function() {
                pauseCounter();
        });
        /** Executes when stop button clicked. **/
        $('.stop').click(function() {
                stopCounter();
        });
        // remove stupid button.
        $('#del').detach().trigger('create');
        // load map.
        init();
        $('#map').trigger('create');
        $('#route').addClass('ui-page-active').trigger('create');
});

1 Ответ

0 голосов
/ 20 января 2012

Карту следует создавать только при инициализации страницы «#route», то есть когда она имеет размерность.

Взгляните на событие pageinit в http://jquerymobile.com/demos/1.0/docs/api/events.html

...