Javascript 小叶边界

现在，我正在通过传递bounds参数设置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>

{this.geoResults（）.map（this.renderMarker）}

---

问题是，有时会在地图的最外层（视图中）渲染标记，因此标记甚至不可见，除非我拖动地图或缩小一个点。我试图用缓冲区解决这个问题，或者尝试绘制边界，然后使用“缩放”缩小一次，但似乎没有任何效果。你们有什么想法吗

解决方案

您可以使用

Map

组件的

boundsOptions

属性将选项传递给传单的

fitBounds（）

方法。在这些选项中，您可以定义填充，例如“填充”边界

从

react传单

文档：

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

从

传单

文档：

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

示例

因此，类似的方法应该有效（没有实际测试）：

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

另一种方法

---

您可以在

getBounds（）

函数中向边界添加填充。

非常棒的答案-我已经了解了这一部分，现在我想在地图边界的顶部添加向量多边形，以便他们可以看到我在bounds参数中提供的确切多边形。你能看看我这边的问题，看看你是否也知道答案吗？谢谢谢谢maxwell。我对你的另一个问题也提了一个建议。你能把我的答案标记为正确的，并考虑对它进行投票（这有点像StGoOver低的游戏化的想法）。干杯。如果其他人也像我一样来这里寻求更全面的解决方案，这可能也会有所帮助：

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