如何使用React传单使用纬度和经度设置新位置的地图视图

Question

我无法设置输入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='&copy; <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;

Answer 1

由于此原因，您无法更改带状态的中心。。。

除了它的子项，MapContainer道具是不可变的：更改它们在第一次设置后不会对映射实例或其容器。

然而，我相信如果你添加一个关键道具，它可能会起作用。你可以试着看看它是否有效。

<MapContainer
center={[IPdata.location?.lat, IPdata.location?.lng]}
zoom={13}
scrollWheelZoom={true}
key={`${IPdata.location?.lat}${IPdata.location?.lng}`}
>

更新：这里提供了另一个使用setView->当中心状态改变时，反应传单中心属性不变

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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
</MapContainer>
</div>
);
}