React-leaflet邊界

Question

現在我通過傳遞一個bounds參數來設置我的反應傳單映射的邊界，如下所示：

   <div hidden={!this.props.hide && !this.props.toggle} className="map-container">

       <Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >

       <Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>

             { this.geoResults().map(this.renderMarker) }


       </Leaflet.Map>

   </div>

問題是有時標記會在地圖的最外面部分（在視​​圖中）呈現，因此除非我拖動地圖或縮小一個點，否則標記甚至不可見。 我試圖用緩沖區修復此問題或嘗試繪制邊界然后使用縮放來縮小一次，但似乎沒有任何效果。 你們有什么想法嗎？

Answer 1

解

您可以使用Map組件的boundsOptions屬性將選項傳遞給傳單的fitBounds()方法。 在這些選項中，您可以定義padding ，例如“填充”邊界。

來自react-leaflet Map文檔：

boundsOptions：object（可選）：傳遞給fitBounds（）方法的選項。

從leaflet fitBounds選項文檔：

padding：相當於將左上角和右下角填充設置為相同的值。

例

所以這樣的事情應該有效（沒有在行動中測試）：

<Leaflet.Map
  ref='leaflet-map'
  bounds={this.getBounds()}
  boundsOptions={{padding: [50, 50]}}
/>

像這樣定義Map元素應該填充邊界。 調整填充值以滿足您的需求。

另一種方法

您可以在getBounds()函數的邊界添加填充。