在反应传单地图中捕获事件答案

【问题标题】：Catch Event in react-leaflet map在反应传单地图中捕获事件
【发布时间】：2018-01-15 21:35:07
【问题描述】：

我想知道如何在 react-leaflet 地图组件上捕获 zoomstart 和 zoomend 事件。

我有一些自定义的非地理地图

            <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                attributionControl={false}
                doubleClickZoom={false}
                zoomControl={false}
                crs={this.mapService.getProjectionType()}
            >



                <ZoomControl position={'topright'} zoomInText={"<img src=" + this.mapService.getPlusIconPath() + " alt='plus' />"} zoomOutText={"<img src=" + this.mapService.getMinusIconPath() + " alt='minus' />"} />
                <CategoryControl />
                <Layers data={this.showPlanService.getJSONResponse()} />

            </Map>

我需要根据缩放级别显示和隐藏一些组件。

【问题讨论】：

你试过onZoomstart/onZoomend吗？
@megamit 是的，兄弟，这是工作。我只是在处理程序方法中犯了一些错误（没有输出的 TODO 注释）但我确信有一些 alert() 方法。

标签： reactjs leaflet react-leaflet

【解决方案1】：

问题总是微不足道的:)

在这个 URL 上是原生传单事件

http://leafletjs.com/reference-1.2.0.html#map-event

要在 React-leaflet 中使用它们，您需要添加 ass 属性事件，如下所示（on + 事件名称）我必须添加事件调用者不是大小写敏感

即

<Map ...  onZoomStart={this.handleZoomStart} onMoveEnd={this.handleMoveEnd} ...> 
</Map

【讨论】：

你是如何导入的？我将它导入为import { MapContainer as Map } from 'react-leaflet';，但 onLoad、onload、load 属性没有触发
stackoverflow.com/questions/49441600/… 如果我没记错的话，Map Container 不是有效的 React Leaflet 组件。
嗯，它对我有用。如果我尝试导入 Map ibstead 而不是 MapContainer，我会得到错误。你能告诉我你正在使用哪个库以及什么版本。似乎 Map 比 MapContainer 有更多的选择