0

React-Leafletのドキュメントでは、特定の動的プロパティを props を介して設定できることが指定されています。ただし、カスタマイズ可能な他の多くの Leaflet プロパティ/メソッドがあります...それらにアクセスするには、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()} />
  }

}

これはこれを行うための最良の方法ですか？

4

1 に答える 1

0

このようにする必要があります：

<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/

他のコントロールも同様

于 2016-07-21T13:17:26.410 に答える