如何解决如何在 react-leaflet 中使用带有动态标记的边界
我有以下功能性反应组件,它可以在适合两个标记的“边界”框中正确显示两个静态标记。
我希望能够传入一组纬度和经度值以供地图显示,但我不知道该怎么做。
这是工作的静态示例:
import React from 'react'
import { MapContainer,TileLayer,Marker } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
const MapLeaflet = () => {
// STATIC MARKER POSITIONS
const position = [42.2974279,-85.628292];
const position2 = [-8.852507,-45.351563];
// BOUNDS CODE
const bounds = L.latLngBounds([position,position2]);
return (
<MapContainer
className=" map"
center={position}
bounds={bounds}
>
<Marker key={key} position={position}>
<Heart/>
</Marker>
<Marker key={key} position={position2}>
<Heart/>
</Marker>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
)
}
如果我传递的是 {coords},我就可以动态显示标记:
const MapLeaflet = ({coors}) => {
...
{ coords && coords.map(coord => (
<Marker key={key} latitude={coord[0]} longitude={coord[1]}>
<SomeMarker/>
</Marker>
))}
...
}
但显然,地图尚未将这些“坐标”考虑在内。传入的coords数组的console.log输出如下:
0: (2) [51.52167056034225,-0.12894469488176763]
1: (2) [46.58635156377568,2.1796793230151184]
2: (2) [40.819721,14.341111]
不知何故,我需要以代码接受的格式将以下行替换为对传入坐标的引用,但我不知道该怎么做。
const bounds = L.latLngBounds([position,position2]);
类似的东西
const bounds = L.latLngBounds({coords});
非常感谢任何帮助。
亲切的问候,马特
解决方法
我想我明白你想要达到的目标。
maxBounds 在 react-leaflet v.3 中是不可变的,因此您需要创建一个自定义组件,该组件将在坐标更改时更改地图边界。它将以坐标为道具,并在坐标改变或组合着陆时改变地图边界。
function Bounds({ coords }) {
const map = useMap();
useEffect(() => {
if (!map) return;
map.fitBounds(coords);
},[map,coords]);
return null;
}
在您的应用程序中,我包含了一个边界变化(坐标变量)和地图边界相应变化的情况。希望这就是您正在寻找的。p>
function App() {
const [coords,setCoords] = useState([
[51.52167056034225,-0.12894469488176763],[46.58635156377568,2.1796793230151184],[40.819721,14.341111]
]);
return (
<>
<MapLeaflet coords={coords} />
<button
onClick={() =>
setCoords([
[52.52167056034225,[47.58635156377568,[41.819721,14.341111]
])
}
>
Change coords
</button>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。