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

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

因此，当我在input中键入一个新的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;

import React，{useffect，useState}来自“React”；
从“./src/Components/Result”导入结果；
从“react传单”导入{MapContainer、TileLayer、Marker、Popup}；
函数App（）{
const APP_KEY=个人_KEY；
const[IPdata，SetIPData]=useState（[]）；
const[search，setSearch]=useState（“”）；
const[query，setQuery]=useState（“8.8.8.8”）；
const[loaded，setLoaded]=useState（false）；
useffect（（）=>{
getIp（）；
setLoaded（真）；
}，[查询]；
异步函数getIp（）{
const response=等待获取(`https://geo.ipify.org/api/v1?apiKey=${APP_KEY}&ipAddress=${query}`）；
const data=wait response.json（）；
控制台日志（数据）；
SetIPData（数据）
}
函数句柄更改（事件）{
setSearch（事件、目标、值）；
日志（event.target.value）；
}
函数handleSubmit（事件）{
event.preventDefault（）；
设置查询（搜索）；
集搜索（“”）；
}
返回(
装载的(
IP地址跟踪器
走！
{IPdata.location&&(
您的IP地址
)
}
)：正在加载

)
}
导出默认应用程序；

由于此原因，无法使用状态更改中心

除了它的子级之外，MapContainer道具是不变的：更改 它们在第一次设置之后，将不会对系统产生任何影响 映射实例或其容器

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

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

---

哪个对你有效？添加关键道具有效