Листовка и jQuery Mobile - изменение размера номера

Question

В настоящее время возникает проблема с получением jQuery Mobile и Leaflet, чтобы играть красиво вместе. Кажется, я не могу получить листовку, чтобы изменить размер карты на «pageinit», и вместо этого она просто появляется в маленькой коробке в верхнем левом углу.

Уровень масштабирования также неверен. Я попытался установить таймаут и метод invaidateSize, но у меня все еще есть проблемы. Я также использую фиксированные верхние и нижние колонтитулы, а элементы управления препятствуют их просмотру. Это код страницы

<div data-role="page" data-theme="d" id="eventMap" data-add-back-btn="true"> 

     <div data-role="header" data-position="fixed" data-id="pageheader"> 
      <h1>Find Events</h1> 
     </div> 

     <div data-role="content" class="ui-content">  

      <div id="mapcanvas"></div> 

     </div> 


     <div data-role="footer" data-position="fixed" data-id="pagefooter"> 

      <div data-role="navbar"> 
       <ul> 
        <li><a href="eventmap.php" class="ui-btn-active">Map</a></li> 
        <li><a href="eventlist.php">List</a></li> 
       </ul> 
      </div> 
     </div> 


     <script type="text/javascript"> 

     function resize() { 

      var content, contentHeight, footer, header, viewportHeight; 
      window.scroll(0, 0); 
      header = $(":jqmData(role='header'):visible"); 
      footer = $(":jqmData(role='footer'):visible"); 
      content = $(":jqmData(role='content'):visible"); 
      viewportHeight = $(window).height(); 
      contentHeight = viewportHeight - header.outerHeight() - footer.outerHeight(); 
      $(":jqmData(role='content')").first().height(contentHeight); 
      return $("#mapcanvas").height(contentHeight); 
     }; 

     $('#eventmap').live('pageinit orientationchange resize', resize); 



     $('#eventMap').live('pageinit', function() {  

      //MAP 
      var tiles, map; 

      map = new window.L.Map('mapcanvas'); 

      tiles = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Eventi8'}); 
      map.addLayer(tiles); 
      map.locateAndSetView(16); 

      map.on('locationfound', onLocationFound); 

      function onLocationFound(e) { 


       var circle = new L.Circle(e.latlng, 30); 

       map.addLayer(circle); 

       var url = 'inc/eventdistancejson.php?lat='+e.latlng.lat+'&long='+e.latlng.lng+'&radius=30'; 

       $.getJSON(url, function (data) { 

        $.each(data.events, function(i, event){ 

         var location = new L.LatLng(event.location.lat, event.location.lng); 

         var marker = new L.Marker(location); 

         marker.bindPopup('<div style="text-align: center; margin-left: auto; margin-right: auto;"><h3>' + event.name + '</h3> <p><a href="event.php?eid='+event.id+'">Event Link</a></p></div>', {maxWidth: '360'}); 

         map.addLayer(marker); 

        }); 

       }); 

      } 

      // Remake Map 
      setTimeout(function(){ 
        map.invalidateSize(); 
      }, 1); 
     }); 
     </script> 


    </div> 

Спасибо за любую помощь, которую вы можете дать. У меня также проблемы с загрузкой JSON на неправильную страницу, а событие pageinit запускается дважды, но это для другого вопроса!

Шон

Answer 1

Проблема заключается в том, что DOM не полностью загружен, прежде чем ваши листовка скрипты начинают выполняться. Поместите все сценарии инициализации карты в функцию, например initMap(), и добавьте id = "mapPage" на свою страницу и добавьте обработчик страниц для вызова функции.

$("#mapPage").live("pageshow",function(event, ui) { 
     initMap(); 
    }