전단지 및 jQuery 모바일 - 크기 조정

Question

현재 jQuery Mobile 및 전단지를 멋지게 함께 플레이하는 데 문제가 있습니다. 나는 '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(); 
    }