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

Posted 2023-02-23

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

【英文标题】：How to change map zoom dynamically when clicking on a marker in react leaflet 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>

有没有办法做到这一点？

【参考方案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