如何在React Leaflet中传入数据库经纬度坐标到Marker组件

从数据库获取的坐标分为lat（纬度）和lon（经度）两个字段，在React Leaflet中添加多个Marker组件时，直接用逗号分隔传入position属性失败，可通过以下方式调整坐标传递逻辑：

错误原因 #

React Leaflet的Marker组件position属性要求传入数组格式（[纬度, 经度]）或对象格式（{ lat: 纬度值, lng: 经度值 }）。你当前写的position={coord.lat, coord.lon}使用了JavaScript逗号运算符，实际只会把coord.lon作为值传入，导致坐标无效。另外注意你的代码中，坐标数据存在coord.data字段下，需正确访问coord.data.lat和coord.data.lon。

解决方案 #

有两种可行的传递方式：

• 数组格式传递：
  将纬度和经度封装进数组：

  <Marker key={coord.id} position={[coord.data.lat, coord.data.lon]} icon={defaultIcon} />
  

• 对象格式传递：
  传入包含lat和lng属性的对象：

  <Marker key={coord.id} position={{ lat: coord.data.lat, lng: coord.data.lon }} icon={defaultIcon} />
  

另外建议用coord.id作为key属性值，比index更稳定，避免列表更新时出现渲染异常。

修正后的完整代码片段 #

const Map = () => {
  const [coordinates, setCoordinates] = useState([]);
  useEffect(() => {
    const q = query(collection(db, "map-markers"));
    onSnapshot(q, (querySnapshot) => {
      setCoordinates(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
  }, []);
  return (
    <div style={{ width: "100%" }}>
      <MapContainer
        center={center}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {coordinates.map((coord) => (
          <Marker key={coord.id} position={[coord.data.lat, coord.data.lon]} icon={defaultIcon} />
        ))}
      </MapContainer>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者userName