Question

我在尝试将基本的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中时，是否有某种方法可以重绘地图/图层？我宁愿用户不必单击地图控件来实际查看地图。

更新：'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://jquerymobile.com/demos/1.0/docs/api/events.html

中的pageinit事件

如果没有双击PhoneGap / jQuery Mobile应用程序，OpenLayers将无法加载

1 个答案: