我在试图使用
在下面的示例中(我使用了
我怀疑与动画有关,因为当增加超时延迟时,问题就不会发生,第二个边界也会被正确设置。
我的设置:
react-leaflet
的 bounds
属性时遇到了问题。我的用例是,我的应用程序在状态中定义了一些初始范围(比如回退边界),并在组件的第一次渲染期间传递这些边界。应用程序架构要求我向组件发送请求以设置新的边界,在此时出现了问题。在下面的示例中(我使用了
setTimeout
模拟 AJAX 请求),我们可以注意到,来自超时后的请求的新边界根本没有设置,我不太确定这是为什么。我怀疑与动画有关,因为当增加超时延迟时,问题就不会发生,第二个边界也会被正确设置。
我的设置:
"react": "17.0.0"
"leaflet": "1.6.0"
"react-leaflet": "2.7.0"
import React, { useState } from "react";
import { Map, ZoomControl, TileLayer } from "react-leaflet";
import "./styles.css";
import "leaflet/dist/leaflet.css";
export default function App() {
const [bounds, setBounds] = useState([
[75, -25],
[30, 45]
]);
setTimeout(() => {
setBounds([
[59.569068610511465, 10.387057922780514],
[59.565111563593824, 10.397184267640114]
]);
}, 200);
return (
<Map
bounds={bounds}
maxBounds={bounds}
zoomControl={false}
style={{
height: 400,
width: 400
}}
>
<TileLayer
url="//{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
maxZoom={21}
minZoom={4}
minZoomIsDrawing={18}
subdomains={["mt0", "mt1", "mt2", "mt3"]}
/>
<ZoomControl />
</Map>
);
}
除其子代外,MapContainer props是不可变的
链接。我想知道它是否适用于2.x版本。顺便说一下,演示应该可以工作。它显示了斯堪的纳维亚地区缩小的例子,但在演示中,同一区域被放大了。 - kboul