jQuery 移动页面不显示内容，直到我刷新

Question

为什么我的包含两个 'Mobile' 页面的 html 页面必须刷新或移动小边缘以在其中显示我的地图？请参阅 my fiddle 或以下代码：

我有一个移动页面文档 (html)，其中有两个 jQuery 移动页面。 1. 要求您表明立场的着陆页。 2. OpenLayers3 地图页面，打开时获取您的位置并将地图居中。

我的问题是：地图将构建，它将以该位置为中心，但直到我调整大小刷新 'map' 边缘或浏览器 window 后才会呈现。我怀疑它与页面事件有关，但不确定。

有没有我遗漏的属性？

安迪

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MobilePg</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>    
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css"/>
    <script type="text/javascript" src=" http://openlayers.org/en/v3.0.0/build/ol.js"></script>

    <style>
        #myFooterPosit {
            color: gray;
        }
    </style>

    <script>
        var x, y;
        $(document).ready(function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            }           
        });

        function showPosition(position) {
            var positThing = $('#myFooterPosit');

            positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);

            x = position.coords.latitude;
            y = position.coords.longitude;

        }


    </script>

</head>
<body>
    <script>
        $(document).on("pagebeforeshow", "#mapPage", function () {
            makeMap();
        })
    </script>
    <!-- Landing page Point of Entry-->
    <div data-role="page" id="homePage">
        <div data-role="header">
            <a href="#mapPage" class="ui-btn ui-corner-all ui-shadow ui-icon-location ui-btn-icon-left">Map</a>

            <h1>Mbl Map Input</h1>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>

        </div>
        <div data-role="main" class="ui-content">
            <p>My Content..</p>
        </div>
        <div data-role="footer">
            <h1><span id="myFooterPosit"></span></h1>

        </div>
    </div>


    <!-- Map Page -->
    <script>
        function makeMap() {
            try {
                alert(x + " : " + y);
                var map = new ol.Map({
                    target: 'map',
                    layers: [
                    new ol.layer.Tile({
                        title: 'OSM',
                        type: 'base',
                        visible: true,
                        source: new ol.source.OSM()
                    })],
                    view: new ol.View({
                        center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 14
                    })
                });
            } catch (e) {
                alert(e.message);
            }
        }
    </script>
    <div data-role="page" id="mapPage">
        <div data-role="header">
            <a href="#homePage" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>

            <h1>Map</h1>
        </div>
        <div data-role="main" class="ui-content">
            <div id="map" class="map" style="height:200px;"></div>
        </div>


        <div data-role="footer">
            <h1><span id="myFooterPosit"></h1>

        </div>
    </div>
</body>
</html

>

Answer 1

您可以使用 pagecontainer 小部件的显示事件：

http://api.jquerymobile.com/pagecontainer/#event-show

Updated FIDDLE

var x, y;

$(document).on("pagecreate","#homePage", function(){ 
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
});
$(document).on( "pagecontainershow", function( event, ui ) {
    if (ui.toPage.prop("id") == "mapPage"){
        makeMap();
    }
});

function showPosition(position) {
    var positThing = $('#myFooterPosit');
    positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
    x = position.coords.latitude;
    y = position.coords.longitude;   
}

function makeMap() {
    try {
        var map = new ol.Map({
            target: 'map',
            layers: [
            new ol.layer.Tile({
                title: 'OSM',
                type: 'base',
                visible: true,
                source: new ol.source.OSM()
            })],
            view: new ol.View({
                center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
                zoom: 14
            })
        });
    } catch (e) {
        alert(e.message);
    }
}

jQuery 移动页面不显示内容，直到我刷新

jQuery Mobile page does not show content until I Refresh

page-refresh

jquery-mobile