setZoom 无法在 Chrome 中工作，但可以在其他浏览器中工作

Question

我无法在 Chrome 中使用 setZoom 或任何缩放功能来处理我的传单地图。

它在 Firefox 和 Edge 中工作正常，但我也需要它在 Chrome 中工作，但找不到任何相关内容。

如有任何帮助，我们将不胜感激，谢谢。

---

请参阅下面在 Firefox 和 Edge 中运行的代码。我需要为 Chrome 删除或添加其中的某些内容吗？

另请注意，“myLocation”变量只是从浏览器中提取的 lat lng。

@track myLocation;
    connectedCallback() {
        Promise.all([loadStyle(this, LEAFLET + "/leaflet.css"), loadScript(this, LEAFLET + "/leaflet.js")]).then(() => {
            this.container = this.template.querySelector(".map");
            // eslint-disable-next-line no-undef
            this.map = L.map(this.container, { scrollWheelZoom: true, maxZoom: 18, minZoom: 10 }).locate({
                setView: true,
                setZoom: 14
            });
            // this.map.setZoom(14)
            // eslint-disable-next-line no-undef
            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {}).addTo(this.map);
            navigator.geolocation.getCurrentPosition(this.success.bind(this));
        });
    }

我也尝试过使用

this.map.setZoom(x)

和

map.setZoom(x)

。

Answer 1

我发现，Chrome 比其他浏览器的地图构建延迟更大。因此，在构建地图时会在地图上设置缩放，从而使其无法工作。

我使用 .setZoom() 和 .draw() 函数解决了这个问题。当地图完成加载并添加标记时，这将导致标记缩放增加。

请参阅下面的示例代码：

draw() {
    console.log(this.myLat, this.myLong);

    if (this.markerArray) {

        this.markerArray.forEach((marker) => {
            this.map.removeLayer(marker);
        });
    }
    this.mapMarkers.forEach((mapMarker) => {
        // eslint-disable-next-line no-undef
        let newMarker = L.circle(
            mapMarker,
            { color: "rgb(34,46,117)", fillColor: "rgb(34,46,117)", fillOpacity: 0.3, radius: 5 }
        );


        newMarker.myData = mapMarker;
        newMarker.addTo(this.map);
        newMarker.on('click', () => {
            this.openfireMapModal(mapMarker);

        });
    });

    this.map.setZoom(18);
    this.map.setView([this.myLat, this.myLong]);
    this.working = false;
}