现在我通过传递一个边界参数来设置我的 react 传单 map 的边界,如下所示:
<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>
问题是有时标记会呈现在 map 的最外层(在 View 中),因此标记甚至不可见,除非我拖动 map 或缩小一个点。我试图用缓冲区修复此问题或尝试绘制边界然后使用缩放缩小一次但似乎没有任何效果。你们有什么想法吗?
最佳答案
解决方案
您可以使用 Map
组件的 boundsOptions
属性将选项传递给传单的 fitBounds()
方法。在这些选项中,您可以定义 padding
,例如“填充”边界。
来自 react-leaflet
Map文档:
boundsOptions: object (optional): Options passed to the fitBounds() method.
来自 传单
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]}}
/>
像这样定义您的 Map 元素应该填充边界。调整填充值以满足您的需求。
另一种方法
您可以在 getBounds()
函数中向边界添加填充。
关于javascript - react 传单边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34643791/