PhoneGap/jQuery 모바일 앱에서 OpenLayers가 두 번 클릭되지 않으면로드되지 않습니다

Question

Open Street Map 레이어가있는 기본 OL 맵을 다중 페이지 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'이벤트를 사용하여 호출한다. 페이지가 DOM에로드 될 때 다시 그려야하는 내가지도/레이어를 얻을 수있는 몇 가지 방법이 있나요

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

:이지도를 포함하는 페이지입니다? 차라리 사용자가지도를보기 위해지도 컨트롤을 클릭하지 않아도됩니다.

업데이트 : '경로'페이지의 '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'); 
}); 

Answer 1

당신은이 차원을 가지고 그렇게되면,«#route»페이지가 초기화 된 경우에만지도를 작성해야합니다.

나는 또한지도를 포함하는 페이지를로드 할 수있는 응용 프로그램의 첫 페이지가 아닌 언급해야 http://jquerymobile.com/demos/1.0/docs/api/events.html