如果不双击 PhoneGap/jQuery Mobile 应用程序，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”事件调用此函数，该事件在 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 中时，有什么方法可以重新绘制地图/图层吗？我希望用户不必单击地图控件即可实际查看地图。

更新：“route”页面的“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:// 中的 pageinit 事件jquerymobile.com/demos/1.0/docs/api/events.html