3

現在、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 イベントが 2 回発生するという問題もありますが、それは別の質問です。

ショーン

4

1 に答える 1

4

問題は、リーフレット スクリプトが実行を開始する前に DOM が完全にロードされていないことです。すべてのマップ初期化スクリプトを initMap() などの関数に入れ、id="mapPage" をページに追加し、pageshow ハンドラを追加して関数を呼び出します。

    $("#mapPage").live("pageshow",function(event, ui) {
        initMap();
    }
于 2012-05-03T21:30:57.917 に答える