Страница jQuery 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 виджета:

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 не отображает контент до тех пор, пока я не обновляю

ответ

Смежные вопросы