React 高德地图输入地址逆编码实现教程

React 高德地图的输入地址逆编码可以通过以下步骤实现：

导入 AMap 和 Input 组件

import AMap from 'AMap';
import { Input } from 'antd';

创建 AMap 实例

const AMapInstance = new AMap.Map('map-container', {
  resizeEnable: true,
  zoom: 14,
  center: [116.397428, 39.90923]
});

创建 Input 组件

<Input.Search
  placeholder='输入地址'
  enterButton='查询'
  onSearch={onSearch}
/>

实现逆地理编码

const onSearch = (value) => {
  AMapInstance.plugin('AMap.Geocoder', function() {
    const geocoder = new AMap.Geocoder({
      city: '全国'
    });
    geocoder.getLocation(value, function(status, result) {
      if (status === 'complete' && result.info === 'OK') {
        const { lng, lat } = result.geocodes[0].location;
        console.log(lng, lat);
      } else {
        console.log('地址解析失败');
      }
    });
  });
}

将获取到的经纬度显示到地图上

const onSearch = (value) => {
  AMapInstance.plugin('AMap.Geocoder', function() {
    const geocoder = new AMap.Geocoder({
      city: '全国'
    });
    geocoder.getLocation(value, function(status, result) {
      if (status === 'complete' && result.info === 'OK') {
        const { lng, lat } = result.geocodes[0].location;
        AMapInstance.clearMap();
        AMapInstance.setCenter([lng, lat]);
        const marker = new AMap.Marker({
          position: [lng, lat]
        });
        marker.setMap(AMapInstance);
      } else {
        console.log('地址解析失败');
      }
    });
  });
}

这样就可以实现在 React 高德地图中输入地址逆编码并在地图上标注出来。