在 React-Leaflet 库中为 <Map> 组件设置选项的正确方法是什么?

What is the proper way to set options for the <Map> component in the React-Leaflet library?

本文关键字：选项 是什么 方法 设置 React-Leaflet Map 组件      更新时间：2023-09-26

React-Leaflet 文档指定某些动态属性可以通过 props 设置。但是，还有许多其他可自定义的传单属性/方法...需要注意的是，为了访问它们，您需要直接与 Leaflet 实例进行交互（在 React-Leaflet 文档中提到）。

我无法找到任何有关如何正确执行此操作的示例，但我确实设法让它工作：

JSFiddle 示例

class SimpleExample extends React.Component {
  ...
  componentDidMount(){
    this.L.doubleClickZoom.disable();
    this.L.zoomControl.setPosition('topright');
  }
  render() {
    return <Map ref={(ref) => this.L = ref.getLeafletElement()} />
  }
}

这是最好的方法吗？

你应该这样做：

<Map center={position} zoom={this.state.zoom} zoomControl={false} doubleClickZoom={false}>
    <ZoomControl position='topright' />
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
    />
    <Marker position={position}>
      <Popup>
        <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
      </Popup>
    </Marker>
</Map>

https://jsfiddle.net/n4emj929/

与其他控件相同

相关文章：