javascript - react : FitBounds issue when passing array of longlat - react-mapbox-gl

Question

我正在尝试使用 fitBounds 以适当的缩放级别使我的所有标记可见。

getBounds(){
   return [[12.49637,41.90278],[12.319398,45.441906],[13.055054,47.809532],[16.373724,48.208244]]
}

<Map
   style="mapbox://styles/mapbox/streets-v9"
   containerStyle={{
     height: "100%",
     width: "100%"
   }}
   fitBounds={this.getBounds()}>
     <markers /> 
</Map>

我收到这个错误

Error: Invalid LngLat object: (12.49637,41.90278, 12.319398,45.441906)
 at new LngLat (bundle.js:118874)
 at Function.LngLat.convert (bundle.js:118874)
 at LngLatBounds.setSouthWest (bundle.js:118876)
 at new LngLatBounds (bundle.js:118876)
 at Function.LngLatBounds.convert (bundle.js:118876)
 at e.i.fitBounds (bundle.js:119021)
 at ReactMapboxGl.ReactMapboxFactory.ReactMapboxGl.componentDidMount (bundle.js:124648)
 at commons.js:19945
 at measureLifeCyclePerf (commons.js:19755)
 at commons.js:19944

我没有弄错这里。请帮我解决这个问题。

这里的 react 组件正在使用 alex3165/react-mapbox-gl

Answer 1

您将错误的边界格式传递给 fitBounds() 函数。

拟合边界期望作为参数:fitBounds : Array<Array<number>>

查看文档:https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md

在 mapbox 中，这称为“LngLatBoundsLike 对象”，请参见此处: https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike

所以你的函数调用必须是这样的:

fitBounds([[12.49637,41.90278],[12.319398,45.441906]]);

第一个参数是西南 Angular ，第二个参数是所需边界框的东北 Angular