Question

我为我的地图定义了边界。在缩放级别15，我的地理位置显示在我的android视口内的边界内。我保持我的地理位置并缩放到17级并尝试再次找到我的位置。现在我收到错误消息：你的位置在地图之外（边界）。我的位置不在界外，而是在视口之外。

    // bounds
    var bounds = new L.LatLngBounds(
        //south west
        [48.121831504767464, 11.584824599741356],
        //north east
        [48.132744242329231, 11.612690096879318]
    );

    var map = L.map('map', {
        maxZoom: 18,
        minZoom: 15,
        // -------------------- Problem -------------------------
        maxBounds: [
            //south west
            [48.121831504767464, 11.584824599741356],
            //north east
            [48.127287873548347, 11.612690096879318]
        ]
    }) .setView([48.127287873548347, 11.598757348310336], 15);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // add control
    var MyControl = L.Control.extend({
        options: {
            position: 'topleft'
        },
        onAdd: function (map) {
            var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
            // add anchor element
            $(container).append(
                $("<a title='Zeigt Ihren Standort an'>").addClass("locate-button")
            );
            return container;
        }
    });
    map.addControl(new MyControl());

和

        // show position-marker with costum icon
        var positionMarker;
        var positionIcon = L.icon({
            iconUrl: '../leaflet/images/position-icon.png',
            iconRetinaUrl: '../leaflet/images/position-icon-2x.png',
            iconSize: [48, 48], // size of the icon
            iconAnchor: [24, 24],
            shadowSize: [1, 1], // size of the shadow - here no shadow
            popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
        });

        // onClick position button (toggle)
        var state = -1;
        $('.locate-button').on('click', function(){
            state=-state; // toggle state
            if( state === 1 ){
                $('.locate-button').addClass('requesting');
                map.locate({setView: false, maxZoom: 18});
            } else {
                map.removeLayer(positionMarker);
            }
        });

        // on found
        map.on('locationfound', function onLocationFound(e){

            // künstliche verzögerung um 2s zu Testzwecken!!!  
            //window.setTimeout( function(){
                $('.locate-button').removeClass('requesting');
            //}, 2000 );


            // -------------------- Problem -------------------------
            // detect if location is outside Map
            if( !map.getBounds().contains(e.latlng)){
                alert("Sie befinden sich außerhalb der verfügbaren Karte, Ihr Standort wird daher nicht angezeigt.");
                return;
            }

            // set position
            map.setView(e.latlng);

            // var radius = e.accuracy / 2;
            positionMarker = L.marker(e.latlng, {icon: positionIcon}).addTo(map)
                // .bindPopup("Sie sind innerhalb eines Radius von " + radius + " Metern um diesen Punkt herum").openPopup();
            // L.circle(e.latlng, radius).addTo(map);
        });

错误在哪里？

狼

Leafletjs映射边界随zoomlevel而变化？

0 个答案: