如果没有在 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 时，有什么方法可以让地图/图层重绘？我宁愿用户不必单击地图控件来实际查看地图。

更新：“路由”页面的“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中的pageinit事件