react高德input地址逆编码

首先，需要在项目中安装 react-amap 和 amap-jsapi-loader 这两个库。
在需要使用的组件中引入 react-amap 和 amap-jsapi-loader。

import React, { useState } from 'react';
import { Input } from 'antd';
import { AMapProvider, Geolocation, AMapGeocoder } from 'react-amap';
import { createFromAMapJSAPILoader } from 'amap-jsapi-loader';

在组件中定义 AMap 和 geocoder 的状态，并使用 AMapProvider 和 Geolocation 组件获取当前位置信息。

const MyMap = () => {
  const [map, setMap] = useState(null);
  const [geocoder, setGeocoder] = useState(null);
  const [address, setAddress] = useState('');

  const loader = createFromAMapJSAPILoader({
    key: 'your amap key',
    version: '2.0',
    plugins: ['AMap.Geocoder'],
  });

  return (
    <AMapProvider
      useAMapUI
      useAMapGeocoder
      // 使用 loader
      AMapLoader={loader}
      // 设置地图中心点为当前位置
      center={<Geolocation enableHighAccuracy />}
      // 设置地图实例
      onInstanceCreated={(map) => setMap(map)}
    >
      {/* 获取地理编码实例 */}
      <AMapGeocoder
        onInstanceCreated={(geocoder) => setGeocoder(geocoder)}
        // 获取地址信息
        onReGeocodeComplete={(data) => setAddress(data.regeocode.formattedAddress)}
      />
      <Input
        placeholder="请输入地址"
        // 地址输入框中输入地址，获取经纬度信息
        onChange={(e) => {
          const address = e.target.value;
          geocoder && geocoder.getLocation(address);
        }}
        // 将地址信息显示在地址输入框中
        value={address}
      />
    </AMapProvider>
  );
};

export default MyMap;

在 onChange 事件中，调用 geocoder.getLocation(address) 方法获取地址对应的经纬度信息。
在 AMapGeocoder 组件中，使用 onReGeocodeComplete 事件获取地址对应的详细信息，并将地址信息显示在地址输入框中