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

<强>解决方案

您可以使用boundsOptions组件的Map属性将选项传递给传单的fitBounds()方法。在这些选项中，您可以将padding定义为例如＆＃34; pad＆＃34;界限。

来自react-leaflet Map文档：

boundsOptions：object（可选）：传递给fitBounds（）方法的选项。

来自leaflet fitBounds options文档：

padding：相当于将左上角和右下角填充设置为相同的值。

示例

所以这样的事情应该有效（没有在行动中进行测试）：

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

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

另一种方法

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

React-leaflet边界

1 个答案: