react使用高德定位怎么在其方法中获得this

Question

react使用高德定位怎么在其方法中获得this

React使用高德插件定位，采用的是同步插入，没有使用高德推荐的模块，采用类式组件。使用插件的过程中，想要得到定位的所在地名字，成功获得，但是将要保存到state中时，确发现没有this，还望指点。

getCurrentCity=()=>{
  window.AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new window.AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // 查询成功，result即为当前所在城市信息
        // this.setState({
        //   currentCity:result.city
        // })
        console.log(result.city)
      }
    })
  })
}

运行结果及详细报错内容

无this，怎么找到this，然后使用setState方法

我的解答思路和尝试过的方法

试过传递this进去，发现压根

我想要达到的结果

找到this，在if判断语句中能够使用this.setState保存获取的数据

Answer 1

可以在高德定位插件的回调函数中使用bind(this)方法将this绑定到React实例上，这样就可以在回调函数中访问React实例的this对象。例如：

const AMap = window.AMap;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address: ''
    }
  }

  componentDidMount() {
    let map = new AMap.Map('container');
    let geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,//是否使用高精度定位，默认:true
      timeout: 10000,          //超过10秒后停止定位，默认：无穷大
      maximumAge: 0,           //定位结果缓存0毫秒，默认：0
      convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true,        //显示定位按钮，默认：true
      buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
            onComplete(result)
        }else{
            onError(result)
        }
    }.bind(this));
    function onComplete(data) {
      console.log(data.addressComponent.city);
      this.setState({
        address: data.addressComponent.city
      })
    }
    function onError(data) {
      console.log(data)
    }
  }
 
  render() {
    return (
      <div>{this.state.address}</div>
    )
  }
}

export default App;