Reactjs 如何使用react+获取地图属性并处理传单v3中的事件；雷杜？

我是react redux（和hooks）的新手，我一直遵循一般教程：

我还对使用react传单感兴趣，在撰写本文时，它位于使用挂钩的v3上。我已经能够加载包含latlng数组的数据来生成标记：

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { Map, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
import { Icon } from "leaflet";
import "../../css/app.css";
import { useSelector, useDispatch } from "react-redux";
import { getMarkers, selectMarkers } from "../features/markerSlice";

export const LeafMap = () => {
    //marker state
    const stateMarker = useSelector(state => state.marker);
    const dispatch = useDispatch();
    useEffect(() => {dispatch(getMarkers());}, [dispatch]);

    // map state
    const stateMap = useSelector(state => state.map)

    if (stateMarker.markers.length > 0) {
        return (
            <MapContainer center={stateMap.center} zoom={stateMap.zoom} scrollWheelZoom={true}>
              <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              {stateMarker.markers.map(el => (
                <Marker position={[el.latitude, el.longitude]}/>
              ))}
            </MapContainer>
        );
    } else {
        return (
            <MapContainer center={stateMap.center} zoom={stateMap.zoom} scrollWheelZoom={true}>
              <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
            </MapContainer>
        );
    }

}

import React，{useffect，useState}来自“React”；
从“react dom”导入react dom；
从“react传单”导入{Map，MapContainer，Marker，Popup，TileLayer，useMap}；
从“传单”导入{Icon}；
导入“../../css/app.css”；
从“react-redux”导入{useSelector，useDispatch}；
从“./features/markerSlice”导入{getMarkers，selectMarkers}；
导出常量LeafMap=（）=>{
//标记状态
const stateMarker=useSelector（state=>state.marker）；
const dispatch=usedpatch（）；
useffect（（）=>{dispatch（getMarkers（））；}，[dispatch]）；
//地图状态
const stateMap=useSelector（state=>state.map）
如果（stateMarker.markers.length>0）{
返回(
{stateMarker.markers.map（el=>(
))}
);
}否则{
返回(
);
}
}

目前，我对如何处理单击事件（标记单击）以及如何访问贴图状态（当前边界框、当前缩放级别等）感到非常困惑。我遇到了一些错误，比如我不能访问映射状态，除非它位于子组件中，或者onclick处理程序无法识别，等等

我希望最终能够根据缩放和边界框动态加载标记，并单击标记以放大它。这可能是因为我是react redux和hooks的绝对起点

---

我不希望有人只是为我写代码，但如果有人能提供如何实现这些的一般指导，将不胜感激

要处理标记单击事件，请使用

eventHandlers

prop并在

Markers

comp上收听单击事件，如下所示：

const CustomMarkers = () => {
    const map = useMap();
    return markers.map((el, i) => (
      <Marker
        key={i}
        position={[el.latitude, el.longitude]}
        icon={icon}
        eventHandlers={{
          click: () => {
            console.log("marker clicked", el);
            console.log(map.getZoom());
          }
        }}
      />
    ));
  };

为了能够获取地图参考，您需要您的自定义组件作为子组件位于

MapContainer

下，或者在创建时使用

MapContainer的
道具获取
地图实例
，然后将其传递给您的自定义组件

示例
非常感谢，这使我对react redux有了更清晰的理解，并解决了我的问题
 function AddMarkerOnClick({ map }) {
        const onClick = () => {
          console.log(map.getZoom());
          if (map?.getZoom() === 6) {
            L.marker([39.77, -106.23], { icon })
              .addTo(map)
              .addEventListener("click", () => map.setZoom(4));
          }
        };
    
        return <button onClick={onClick}>Add marker on click</button>;
      }

...
return (
<>
      <AddMarkerOnClick map={map} />
      <MapContainer
        center={position}
      ...
</>
)