React Leaflet 更新位置

Question

我有一个关于 React Leaflet 的问题。我现在正在尝试使用 React 框架构建 PWA，我需要使用地图，因此需要使用 React Leaflet。

情况是这样的：

我需要在进入地图页面时加载地图，它必须在我所在的当前位置。我在 App.js 文件中制作了一个地图组件：

function App() {
  return (
    <Map />
  );
}
export default App;

在我的 Map 组件中，我目前没有太多，因为我更改了很多不起作用的东西。

function Map() {
  
    return (
      <>
        <MapContainer center={[46.8182, 8.2275]} zoom={12} scrollWheelZoom={true}>
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <ResetView />
        </MapContainer>
      </>
    )
  }

export default Map;

我查看了所有这些网站并尝试了解如何去做，但从来没有真正做对任何事情：

https://react-leaflet.js.org/docs/example-animated-panning/

https://react-leaflet.js.org/docs/example-external-state/

https://www.reddit.com/r/reactjs/comments/qol90a/set_position_of_the_react_leaflet_map/

所以我想做的是用这个获取当前位置：

navigator.geolocation.getCurrentPosition();

当当前位置返回经度和纬度时，将地图平移到这些坐标所在的位置。

希望我说得够清楚，感谢大家的帮助！

我尝试通过道具发送位置。我试图通过 React hooks 获取位置并加载 Map 组件，但似乎没有任何效果。

Answer 1

我终于找到了正确的方法，没关系。

function ChangeLocation(location) {
  const map = useMap();
  map.panTo([location.location.lat, location.location.lng]);
}

function Map() {
  const [location, setLocation] = useState();

  const getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((data) => {
        setLocation({ lng: data.coords.longitude, lat: data.coords.latitude });
      });
    } else {
      console.log("Géolocalisation pas supportée");
    }
  };

  useEffect(() => {
    getLocation();
  }, []);

  return (
    <>
      <button
        onClick={() => {
          navigator.geolocation
            ? getLocation()
            : console.log("Géolocalisation pas supportée");
        }}
      >
        Center
      </button>
      <MapContainer center={[46.8182, 8.2275]} zoom={12} scrollWheelZoom={true}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {location ? <ChangeLocation location={location} /> : ""}
      </MapContainer>
    </>
  );
}
export default Map;

如果有更好的方法或代码不正确，请告诉我！