Question

我正在使用以下代码段尝试从uber react-map-gl访问MapBox API：4.0.2（使用mapbox-gl v0.50.0）。

 import MapGL from 'react-map-gl';
 export default class App extends Component 
 {
   constructor(props) {
    super(props);
   this.mapRef= React.createRef();
   }
   componentDidMount() 
   {
      let data = this.mapRef.getMap().getBounds(); <----
   } 
   render() {
    <MapGL
    {...viewport}
    width="100%"
    height="100%"
    mapStyle={MapStyle}
    onViewportChange={this._updateViewport}
    ref={map => this.mapRef = map}
    mapboxApiAccessToken={TOKEN} >
   }
 }

如果我尝试访问诸如getStyle / getSource之类的任何其他方法，而其他方法则引发错误“不是函数”和“无法读取未定义的属性'version'”。我是在做错什么，还是不是所有MapBox Api方法都不能通过getMap（）方法获得？

谢谢

Answer 1

如果可以正确获取map对象，则应该公开所有功能，包括getStyle。 getSource也不适合我，可能是因为使用mapStyle不算作源？不知道这最后一点。

Answer 2

我用它来获取初始地图边界。

    getMapBoundaries = () => {
    // Get map boundaries
    const myMap = this.mapRef.getMap(); 
    console.log(myMap.getBounds());
    const mapBoundaries = myMap.getBounds();
    this.setState({ mapBoundaries })
  }

  componentDidMount = () => this.getMapBoundaries();

我还注意到，“ react-map-gl”的导入应为

import ReactMapGL from 'react-map-gl';

为什么会出错？看来您没有在componentDidMount方法中使用返回函数。

uber / react-map-gl getMap和公开的Mapbox API

2 个答案: