基于react-amap的高德地图选点组件

react-amap是一款基于React的高德地图组件库，其中包括了许多常用的地图组件，如地图、标注、覆盖物等。在react-amap中，我们可以很方便地实现一个高德地图选点组件。

具体实现步骤如下：

1.安装react-amap

通过npm安装react-amap：

npm install react-amap --save

2.在组件中引入react-amap的Map组件

import { Map } from 'react-amap';

3.在Map组件中添加一个事件处理函数，用于在地图上点击时获取经纬度信息

handleClick = (e) => {
  console.log(e.lnglat);
}

4.在Map组件中添加一个点击事件监听器，将事件处理函数传入

<Map onClick={this.handleClick} />

5.在点击事件处理函数中，使用高德地图API的Geocoder服务将经纬度转换为地址信息

handleClick = (e) => {
  const geocoder = new AMap.Geocoder();
  geocoder.getAddress(e.lnglat, (status, result) => {
    if (status === 'complete' && result.regeocode) {
      console.log(result.regeocode.formattedAddress);
    } else {
      console.log('获取地址失败');
    }
  });
}

6.将获取到的地址信息保存到组件的状态中，并在页面上展示

state = {
  address: '',
}

handleClick = (e) => {
  const geocoder = new AMap.Geocoder();
  geocoder.getAddress(e.lnglat, (status, result) => {
    if (status === 'complete' && result.regeocode) {
      const address = result.regeocode.formattedAddress;
      this.setState({ address });
    } else {
      console.log('获取地址失败');
    }
  });
}

render() {
  const { address } = this.state;
  return (
    <div>
      <Map onClick={this.handleClick} />
      <div>选中地址：{address}</div>
    </div>
  );
}

至此，一个简单的高德地图选点组件就完成了。通过上述步骤，我们可以很方便地实现一个高德地图选点组件，以便在需要获取用户地址信息时使用