Leaflet＆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」，並添加一個pageshow處理函數來調用該函數。

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