Javascript 如何在react传单v.3.x中单击标记时动态更改地图缩放？

我试图找到很多关于这方面的东西，但我无法让它工作。我想要的是当点击标记地图在那个位置的中心，并得到完全的缩放。例如，我在美国各地总共有23个标记，初始地图缩放为4。我想要的是，若用户点击地图上的标记，那个么地图中心将变为那个标记lat，lng，并从4放大到14。标记已渲染我不希望在函数MyMapComponent中渲染标记。它来自API数据。不知道该怎么做。我尝试了useMapEvents，但它在map click上工作，而不是marker click，如果我使用markerseventHandlersclick，我无法调用mapuseMapEvents来设置lat、lng和更改缩放

这是我的密码：

function MyMapComponent() {
const map = useMapEvents({
    click: () => {
        let data = {lat: 46.8835319, lng: -114.0348327}
        map.flyTo(data, 18)
    }
})  
return null}

上面的代码是我需要改变地图中心和缩放

<div className="project-view-section">
                <MapContainer bounds={outerBounds} center={[37.2755, -104.6571]} zoom={mapOptions.zoom} scrollWheelZoom={false}>
                    <MyMapComponent />
                    <LayersControl position="topright">
                        <LayersControl.BaseLayer checked name="Mapbox Satellite">
                            <TileLayer
                                url={'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token='+MAPBOX_TOKEN}
                                attribution="Map data &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
                            />
                        </LayersControl.BaseLayer>
                        <LayersControl.BaseLayer name="Mapbox Streets">
                            <TileLayer
                                url={'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token='+MAPBOX_TOKEN}
                                attribution="Map data &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
                            />
                        </LayersControl.BaseLayer>
                    </LayersControl>
                    <MarkerClusterGroup>
                    {   
                        
                            state.markersData.map((element, index) =>
                                <Marker 
                                    key={index} 
                                    marker_index={index} 
                                    position={element} 
                                    icon={icon} 
                                    eventHandlers={{click: () => {test()},}}>
                                </Marker>
                            )
                        
                    }
                    </MarkerClusterGroup>

                </MapContainer>
            </div>

{   
state.markersData.map（（元素，索引）=>
{test（）}，}}>
)
}

---

有什么方法可以做到这一点吗？

您应该使用

eventHandlers

prop-on-Marker并收听click-event。然后使用本地传单的代码：

map.setView（coords，zoom）

函数标记（{data}）{
const map=useMap（）；
返回(
数据长度>0&&
data.map（（标记、索引）=>{
返回(
{
map.setView(
[
marker.geometry.坐标[1]，
marker.geometry.coordinates[0]
],
14
);
}
}}
键={index}
位置={{
lat:marker.geometry.coordinates[1]，//您的api结构
lng:marker.geometry.coordinates[0]//您的api结构
}}
icon={icon}
>
{marker.properties.label}
);
})
);
}

然后将标记comp用作MapContainer子级

function Markers({ data }) {
  const map = useMap();
  return (
    data.length > 0 &&
    data.map((marker, index) => {
      return (
        <Marker
          eventHandlers={{
            click: () => {
              map.setView(
                [
                  marker.geometry.coordinates[1],
                  marker.geometry.coordinates[0]
                ],
                14
              );
            }
          }}
          key={index}
          position={{
            lat: marker.geometry.coordinates[1], // your api structure
            lng: marker.geometry.coordinates[0] // your api structure
          }}
          icon={icon}
        >
          <Popup>
            <span>{marker.properties.label}</span>
          </Popup>
        </Marker>
      );
    })
  );
}