如何解决如何使用 React-leaflet 使用纬度和经度设置新位置的地图视图
我无法设置输入 IP 地址的地图视图,而标记可以移动到给定输入 IP 地址的地图上的新位置。地图似乎停留在初始位置,而标记移动到新位置。
因此,当我在输入中输入新 IP 地址时,它应该将地图更改为新位置。
import React,{ useEffect,useState} from "react";
import Result from "../src/Components/Result";
import {MapContainer,TileLayer,Marker,Popup } from 'react-leaflet';
function App() {
const APP_KEY = PERSONAL_KEY;
const [IPdata,SetIPData] = useState([]);
const [search,setSearch] = useState("");
const [query,setQuery] = useState("8.8.8.8");
const [loaded,setLoaded] = useState(false);
useEffect(() => {
getIp();
setLoaded(true);
},[query]);
async function getIp() {
const response = await fetch(`https://geo.ipify.org/api/v1?apiKey=${APP_KEY}&ipAddress=${query}`);
const data = await response.json();
console.log(data);
SetIPData(data)
}
function handleChange(event) {
setSearch(event.target.value);
console.log(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
setQuery(search);
setSearch('');
}
return (
loaded ? (
<div>
<div className="container">
<div className="input-section">
<h1 className="header"> IP Address Tracker</h1>
<form onSubmit={handleSubmit} className="search-form">
<input className="search-input" type="text" placeholder="Search for any IP address or domain" onChange={handleChange} />
<button className="search-button" type="submit"> Go! </button>
</form>
</div>
<div className="result-container">
<Result
heading={"IP Address"}
searchResult={IPdata.ip}
/>
<Result
heading={"Location"}
searchResult={IPdata?.location?.country}
/>
<Result
heading={"Timezone"}
searchResult={"UTC" + IPdata?.location?.timezone}
/>
<Result
heading={"ISP"}
searchResult={IPdata.isp}
/>
</div>
</div>
{IPdata.location && (
<MapContainer
center={[IPdata.location?.lat,IPdata.location?.lng]}
zoom={13}
scrollWheelZoom={true}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[IPdata?.location?.lat,IPdata?.location?.lng]}>
<Popup>Your IP Location</Popup>
</Marker>
</MapContainer>
)
}
</div>) : <p>Loading...</p>
)
}
export default App;
解决方法
因为这个,你不能用 state 改变中心...
除了它的孩子之外,MapContainer 的 props 是不可变的:不断变化 第一次设置后,它们将不会影响 地图实例或其容器。
但是,我相信如果您添加一个关键道具它可能会起作用。你可以试试看能不能用。
<MapContainer
center={[IPdata.location?.lat,IPdata.location?.lng]}
zoom={13}
scrollWheelZoom={true}
key={`${IPdata.location?.lat}${IPdata.location?.lng}`}
>
更新:此处提供了另一种使用 setView
-> React leaflet center attribute does not change when the center state changes
function ChangeView({ center,zoom }) {
const map = useMap();
map.setView(center,zoom);
return null;
}
function Map({ center,zoom }) {
return (
<div className="map">
<MapContainer center={center} zoom={zoom} scrollWheelZoom={false}>
<ChangeView center={center} zoom={zoom} />
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
</MapContainer>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。