如何解决使用 Places Autocomplete 进行 React-Leaflet 地图重定位
我的反应应用程序已经用反应传单创建了地图:
import {MapContainer TileLayer } from "react-leaflet";
import React from "react";
export default function App() {
return (
<MapContainer
center={[49.1951,16.6068]}
zoom={13}
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
<Search/>
);}
此外,我的应用程序具有使用地点自动完成功能的搜索组件,我可以从中获取新坐标,它在这里:https://github.com/AlonaVa/searchApp/blob/main/search.js
我的任务是将我的地图从搜索组件 (latLng) 重新定位到所选位置。 谢谢你的建议。
解决方法
在 App comp 中创建地图变量和坐标变量。
然后将坐标的 setter 传递给 Search comp。一旦坐标变化触发应用上的地图视图变化
export default function App() {
const [map,setMap] = useState(null);
const [coordinates,setCoordinates] = useState({ lat: "",lng: "" });
useEffect(() => {
if (map && coordinates.lat && coordinates.lng) map.setView(coordinates);
},[map,coordinates]);
return (
<>
<MapContainer
center={[49.1951,16.6068]}
zoom={13}
scrollWheelZoom={false}
style={{ height: "100vh" }}
whenCreated={setMap}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
</MapContainer>
<Search setCoordinates={setCoordinates} />
</>
);
}
在 Search comp 中,如果我们考虑到该值是一个包含 lat
和 lng
的对象,请使用坐标设置器来更改坐标值:
export default function Search({ coordinates,setCoordinates }) {
const [address,setAddress] = useState("");
const handleSelect = async (value) => {
const results = await geocodeByAddress(value);
latLng = await getLatLng(results[0]);
setAddress(value);
setCoordinates({ lat: value.lat,lng: value.lng });
};
...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。