Question

我对开放街道地图有小的疑问。我有以下代码：

function onLocationFound(e) {
            var radius = e.accuracy / 2;
            lat = e.latlng.lat;
            lng = e.latlng.lng;

            L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!");
            //L.circle(e.latlng, radius).addTo(map);


        }

        function onLocationError(e) {
            //alert(e.message);
            console.log(e.message);
        }


        var map = L.map('mapdiv', {
            editable: true,
            fadeAnimation: false
        }).setView([54.35070881441067, 18.641191756395074], 15);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 16, zoomControl: true, detectRetina: true
        }).addTo(map);


        map.on('locationfound', onLocationFound);
        map.on('locationerror', onLocationError);
        map.locate({setView: true, maxZoom: 16});


        let myFilter = ['grayscale:100%'];

        let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
            attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
            filter: myFilter,
        }).addTo(map);




        var LeafIcon = L.Icon.extend({
            options: {
                iconSize: [25, 29],
                iconAnchor: [25, 29],
                popupAnchor: [-12, -22]
            }
        });


        L.icon = function (options) {
            return new L.Icon(options);
        };


        var icons = {
            greenIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon19.png')}}'}),
            redIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'}),
            blackIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'})
        }


        var image = '';
        $.ajax({
            url: '{{url('/getPointForMap')}}',
            method: 'get',
            cache: false,
            success: function (data) {
                $.each(JSON.parse(data), function(i, poi) {
                    if (poi.photo != ''){
                        image = '<img src="'+poi.photo+'" class="mapImgF"><br/>';
                    }
                    L.marker([poi.lat, poi.lng], {icon: icons[poi.marker]}).addTo(map).addTo(map).bindPopup('<a href="'+poi.url+'">' + image + '<div class="mapTitleF">' + poi.name + '</div>' + '<div class="mapDescF"> ocena: ' + poi.score + '<br/>' + poi.price + ' </div></a>', {maxWidth: "auto", closeOnClick: true});
                });
            }
        });

<div id="mapdiv"></div>

地图通常可以正常工作，可以下载并显示点。

我的问题是缩放设置。启动地图后，系统要求用户授予定位权限。但是，在同意加载地图后，将设置地图缩放的最大缩放。我希望缩放比例尽可能低，以便用户可以在地图上看到可见的片段。

如何做到？

Answer 1

我相信解决您问题的关键是以下这一行：map.locate({setView: true, maxZoom: 16});

此处的maxZoom参数确定显示用户位置时应自动设置的最大缩放比例（这并不意味着这是用户在地图上可以使用的最大缩放比例，它仅指自动查看设置）。因此，如果将其更改为map.locate({setView: true, maxZoom: 8});，您应该会看到区别。

如果您想进一步研究，请参见相应的文档：https://leafletjs.com/reference-1.5.0.html#locate-options-maxzoom

以地图上的点为中心

1 个答案: