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

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&nbsp;Event('resize'));调度窗口调整大小事件，该事件读取地图容器大小并在页面加载时相应地调整窗格。

Answer 2

您需要删除该grayscale属性或将其更改为0.所以改变这个...&nbsp;<div class="leaflet-layer" style="z-index: 1; filter: grayscale(100%);">对此&nbsp;<div class="leaflet-layer" style="z-index: 1;">或者如果您无法内联更改它，请在您的 CSS 中尝试此操作...&nbsp;.leaflet-layer { filter: grayscale(0); }