反应传单边界

Question

现在我正在通过传递边界参数来设置我的 React 传单地图的边界，如下所示：

   <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 (optional): Options passed to the fitBounds() method.

来自 leaflet fitBounds options 文档：

padding: Equivalent of setting both top left and bottom right padding to the same value.

例子

所以像这样的东西应该可以工作（没有实际测试）：

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

像这样定义您的地图元素应该填充边界。调整填充值以满足您的需要。

另一种方法

您可以在 getBounds() 函数的边界中添加填充。

反应传单边界

React-leaflet bounds

javascript

dictionary

leaflet

reactjs

react-leaflet