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

解

您可以使用组件的boundsOptions属性Map将选项传递给传单的fitBounds()方法.在这些选项中,您可以定义padding例如"填充"边界.

从react-leaflet 地图文档:

boundsOptions:object(可选):传递给fitBounds()方法的选项.

从leaflet fitBounds选项文档:

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

例

所以这样的事情应该有效(没有在行动中测试):

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

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

另一种方法

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