尝试使用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
答案 0 :(得分:3)
您正在将错误的边界格式传递给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]]);
第一个参数是西南角,第二个参数是所需边界框的东北角
答案 1 :(得分:1)
传递给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