如何更改地图容器反应传单的中心？

Question

我希望能够通过单击作为具有坐标的对象的锻炼容器来更改 react-leaflet 地图容器的中心。我使用 contextApi 共享了整个组件的所有状态

//WorkoutData.js

export const WorkoutsData = [
  {
  id: 1,
  coords: {latitude: 56.27360151291927, 
  longitude:-82.84886256490017},
  },
  
  {
  id: 2,
  coords: {latitude: 49.27360151291927, 
  longitude: -75.84886256490017},
  },

  {
  id: 3,
  coords: {latitude: 39.27360151291927, 
  longitude: -79.84886256490017},
  }
];

//地图位置.js 我有一个 main.js 文件夹，其中包含所有状态变量，所有其他组件使用 contextapi 共享变量

    import React, { useEffect, useState } from "react";
    import "./styles.css";
    import { WorkoutsData } from "./WorkoutLocation";

    const MapLocation() => {
const [workouts, setWorkouts] = useState(WorkoutsData);
const [changedCoords, setChangedCoords] = useState({latitude: 0, longitude: 0})
const [workoutsClicked, setWorkoutsClicked] = useState(false);

     
 const locateWorkout = (id) => {
        setWorkoutsClicked(true)
        const findLocation = workouts.find((exercise) => {
          return exercise.id === id;
        });
        
        setChangedCoords({
          latitude: findLocation.coords.latitude,
          longitude: findLocation.coords.longitude
        })
      }



return(
<>
workouts.map((workout) => {
return(
<div key = {workout.id} className = 'workout-info'>
<div className = "workout-details">
<p>{workout.coords}</p>
</div>
</div>
)
})
</>
)
export default MapLocation;

//Map.js 我有一个 main.js 文件夹，其中包含所有状态变量，所有其他组件使用 contextapi 共享变量

const Map = () => {
const[initialCoords, setInitialCoords] = useState({latitude: 0, longitude: 0})

 useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        setInitialCoords({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        })
      })
    }
  }, [])



return(
<>
 <MapContainer center = { 
workoutsClicked !== true ? 
[initialCoords.latitude, initialCoords.longitude] : 
[changedCoords.latitude, changedCoords.longitude]}
zoom = {20}>

<TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

</MapContainer>
</>
)
}

export default Map

Answer 1

React Leaflet 中的MapContainer 属性是不可变的（https://react-leaflet.js.org/docs/api-map/#mapcontainer），因此在地图初始化后更新它们将无效。

当您的changedCoords 状态发生变化时，您可以使用useMapEvent hook 更新地图中心。首先定义一个函数：

function UpdateMapCentre(props) {
  const map = useMap();
  map.panTo(props.mapCentre);
  return null;
}

然后将以下内容添加为MapContainer 的子项：

<MapContainer ...>
  ...
  <UpdateMapCentre mapCentre={changedCoords} />
</MapContainer>

因为传递给MapContainer 的props 是不可变的，所以您不再需要三元if 语句来设置地图中心（更新地图中心现在使用<UpdateMapCentre> 来处理），只需传入@987654331 @。

<MapContainer center={[initialCoords.latitude, initialCoords.longitude]} zoom={20}>
  ...
</MapContainer>

请参阅this StackBlitz 以获得工作演示。当您单击地图下方列表中的锻炼纬度时，changedCoords 状态将更新，地图将平移到锻炼的经纬度。