jQuery Mobile页面不会显示内容，直到我刷新

为什么我的两个'Mobile'页面的HTML页面必须刷新或移动小边缘以显示我的地图？请参阅my fiddle或下面的代码：jQuery Mobile页面不会显示内容，直到我刷新

我有一个移动页面文档（html），有两个jQuery Mobile页面。 1.您被要求知道您的位置的目标网页。 2. OpenLayers3地图页面打开时会占据您的位置并将地图居中。

我的问题是：地图会生成，它将以位置为中心，但直到我调整大小后刷新'地图'边缘或浏览器窗口才会渲染。我怀疑它与页面事件有关，但我不确定。

是否有我失踪的财产？

安迪

<!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

来源

2015-08-31 DrSockMonkee

我不确定小提琴是否工作或不从链接。 http://jsfiddle.net/DaddyMagic/j6tkn539/3/ – DrSockMonkee

可以使用pagecontainer Widget的show事件：

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

更新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); 
    } 
}

来源

2015-08-31 20:14:49 ezanker

谢谢。这非常漂亮。 – DrSockMonkee

jQuery Mobile页面不会显示内容，直到我刷新

回答

相关问题