Jquery mobile 如果不双击PhoneGap/jQuery移动应用程序，OpenLayers将无法加载

我在尝试将带有开放街道地图层的基本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>

---

您应该仅在初始化«route»页面时创建地图，因此当它具有维度时

---

查看

中的pageinit事件，我还应该提到，包含地图的页面不是要加载的应用程序中的第一个页面。似乎双击地图元素也会使地图出现。我尝试使用“.focus”函数为地图元素提供焦点，jQuery Mobile的内置刷新功能都不起作用。我在应用程序中使用了该事件来添加按钮处理程序和生成UI处理程序，因此我将init调用放在了末尾。它的工作原理与现在显示的地图相同，但现在“路线”页面是第一个显示的页面。我想可能是因为我在它前面调用了一个触发器函数，所以我把它放在了前面。我已将事件处理程序的代码放在问题中。将init调用放在触发器之前使我回到双击要求。我尝试了一些警报语句，似乎在创建映射或调用init后的事件处理程序后，init中没有调用任何东西。$'map'。trigger'create'；$'路由“.addClass”ui-page-active“。触发“创建”；为什么需要这样做？第一个命令是尝试刷新失败的map元素，删除后不会改变情况，第二个命令使相关元素看起来处于活动状态-这是后来解决的另一个问题遗留下来的。-换句话说，它们都不需要了。好吧，我已经弄明白了为什么在创建地图之后什么都不运行了。我对函数调用运行了一个try/catch语句，它给出了以下错误：“TypeError:‘null’不是对象”。我做了一些搜索，在Firefox中通过firebug运行脚本之后，我想我遇到了与本文记录的相同的问题：-如果我关闭对话框，我仍然可以在双击它后访问地图。

/** 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');
});