单击反应传单 v.3.x 中的标记时如何动态更改地图缩放？答案

【问题标题】：How to change map zoom dynamically when clicking on a marker in react leaflet v.3.x?单击反应传单 v.3.x 中的标记时如何动态更改地图缩放？
【发布时间】：2021-04-16 04:33:25
【问题描述】：

我试图找到很多关于这个的东西，但我无法让它工作。我想要的是当点击标记地图以该位置为中心并完全缩放时。例如，我在美国各地总共有 23 个标记，初始地图缩放为 4。我想要的是如果用户单击地图中的标记，然后地图中心更改为该标记 lat、lng 并放大假设从 4 到 14 . 标记已经呈现我不希望标记在函数 MyMapComponent 中呈现。它来自 API 数据。不知道该怎么做。我试过 useMapEvents 但它适用于地图点击而不是标记点击，如果我使用标记 eventHandlers 点击我无法调用地图 useMapEvents 来设置纬度、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>

有没有办法做到这一点？

【问题讨论】：

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

你应该在 Marker 上使用 eventHandlers 属性并监听点击事件。然后使用原生传单的代码：map.setView(coords, zoom)

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>
      );
    })
  );
}

然后将 Markers comp 用作 MapContainer 子项。

Demo with a free api

【讨论】：