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 事件被触发两次的问题，但那是另一个问题！

肖恩

4

1 回答 1

4

问题是在您的传单脚本开始执行之前 DOM 尚未完全加载。将所有地图初始化脚本放在像 initMap() 这样的函数中，并在页面中添加一个 id="mapPage" 并添加一个 pageshow 处理程序来调用该函数。

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