基于react的input输入地址高德逆编码组件不展示地图

以下是一个基于React的输入地址高德逆编码组件的示例，它可以将用户输入的地址转换为经度和纬度，并不需要展示地图。

import React, { useState } from 'react';
import { Input } from 'antd';
import axios from 'axios';

const { Search } = Input;

const GeoDecoder = () => {
  const [location, setLocation] = useState({});

  const onSearch = async (value) => {
    try {
      const response = await axios.get(
        `https://restapi.amap.com/v3/geocode/geo?key=<YOUR_AMAP_API_KEY>&address=${value}`
      );
      const { geocodes } = response.data;
      if (geocodes.length > 0) {
        const { location } = geocodes[0];
        const [longitude, latitude] = location.split(',');
        setLocation({ longitude, latitude });
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Search
      placeholder="输入地址"
      allowClear
      enterButton="搜索"
      size="large"
      onSearch={onSearch}
    />
  );
};

export default GeoDecoder;

这个组件使用了Ant Design的<Input.Search>组件作为输入框，并使用了Axios库来发送HTTP请求。在用户输入地址后，组件会向高德地图API发送一个逆编码请求，然后将返回的经纬度保存在location状态中。这些信息可以传递给其他组件或API，以便后续处理