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

这里没有弄错。请帮帮我。

这里反应成分使用alex3165/react-mapbox-gl

Answer 1

您正在将错误的边界格式传递给fitBounds（）函数。

适合边界需要作为参数：fitBounds : Array<Array<number>>

请参阅文档：https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md

在mapbox中，这称为＆＃34; LngLatBoundsLike对象＆＃34;，请参见此处： https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike

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

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

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

Answer 2

传递给fitBounds的输入应采用Array<Array<number>>

的形式

getMinOrMax(markersObj, minOrMax, latOrLng) {
 if(minOrMax == "max"){
  return _.maxBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }else{
  return _.minBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }
}

getBounds(markersObj) {
  var maxLat = this.getMinOrMax(markersObj, "max", "lat");
  var minLat = this.getMinOrMax(markersObj, "min", "lat");
  var maxLng = this.getMinOrMax(markersObj, "max", "lng");
  var minLng = this.getMinOrMax(markersObj, "min", "lng");

  var southWest = [minLng, minLat];
  var northEast = [maxLng, maxLat];
  return [southWest, northEast];
}

因此，使用上述方法从给定的标记位置对象数组中找出SouthWest和NorthEast点。

标记样本对象应如下所示：

var markerPoints = [{lng:12.49637,lat:41.90278},{lng:12.319398,lat:45.441906},{lng:13.055054,lat:47.809532},{lng:16.373724,lat:48.208244}]

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

注意：我在示例中使用lodash liblary作为实用程序函数，如min和max。

谢谢，
JOSAN

React：传递lonlat数组时的FitBounts问题 - react-mapbox-gl

2 个答案: