javascript - Wrong background under map( map 背景有问题)

Question

我是初学者 Web 开发人员，我对 Open Street Map 有疑问:https://ibb.co/x8mqR62

我有这个代码:

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

    <script type="text/javascript">

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

            map.setView([lat, lng], 12);
        }

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


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





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


            // lc = L.control.locate({
            //     strings: {
            //         title: "Pokaż gdzie jestem"
            //     }
            // }).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});
                    });
                }
            });

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





        </script>

        <style type="text/css">
            #mapdiv {
                height: 600px;
                width:100%;
            }

        </style>

这张 map 工作正常，但我的问题是灰色背景。

我的 map 在线预览:http://serwer1356363.home.pl/pub/test/mapa.html

如何去除灰色背景并显示正常的彩色 map ？

Answer 1

这是 Leaflet 的常见问题。一种解决方案是使用 window.dispatchEvent():

window.dispatchEvent(new Event('resize'));

调度窗口调整大小事件，该事件读取 map 容器大小并在页面加载时相应地调整 Pane 。