地图下背景错误（地图背景有问题）

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]                }            });这个地图工作正常，但我的问题是灰色背景。我的地图在线预览：http : //serwer1356363.home.pl/pub/test/mapa.html如何删除灰色背景并显示正常的彩色地图？

Answer 1

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

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

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

Answer 2

您需要删除该grayscale属性或将其更改为0.

所以改变这个... <div class="leaflet-layer" style="z-index: 1; filter: grayscale(100%);">

对此 <div class="leaflet-layer" style="z-index: 1;">

或者如果您无法内联更改它，请在您的 CSS 中尝试此操作... .leaflet-layer { filter: grayscale(0); }