简体   繁体   中英

Set boundaries with leaflet maxbounds but doesn't work

Hi i try to set the maxbaounds in a leaflet map but it doesn't work. My first questions is maxbounds stop to pan outside the borders that I set? I follow this examples but something is wrong in my code

Leaflet maxBounds - bounds do not work

https://docs.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/

My code

<html>
    <head>
        <title>A Leaflet map!</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
        <style>
            #map{ height: 100% }
        </style>
    </head>
    <body>

        <div id="map"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
        <script>

            var southWest = L.latLng(34.072711,31.758391),
                northEast = L.latLng(36.113055, 35.124228),
                bounds = L.latLngBounds(southWest, northEast);

            var counties = $.ajax({
                url: "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",
                dataType: "json",
                success: console.log("County data successfully loaded."),
                error: function(xhr) {
                    alert(xhr.statusText)
                }
            })
            $.when(counties).done(function() {
                var map = L.map('map')
                .setView([35.126411,33.429859], 9);

                //tiles - http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png
                var basemap = L.tileLayer('http://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}', {
                    attribution: '&copy; <a href="http://info.2gis.com/">2GIS</a> &copy; <a href="https://www.opencartography.com">Open Cartography</a>',
                    subdomains: 'abcd',
                    maxBounds: bounds,
                    maxZoom: 19,
                    minZoom: 9
                }).addTo(map);

                // Add requested external GeoJSON to map
                var kyCounties = L.geoJSON(counties.responseJSON).addTo(map);
                var scale = L.control.scale()
                scale.addTo(map)   
            });
        </script>
    </body>
</html>

Use maxBounds on the L.map to set the bounds limits.

var map = L.map('map')
                .setView([35.126411,33.429859], 9)
                .setMaxBounds(bounds);

Plus - don't confuse mapbox.js with leaflet.js - they're different.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM