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();
    }

宣传单＆amp; jQuery Mobile - 调整问题大小

1 个答案: