React 中使用 AMapUI 组件指南

要在 React 中使用 AMapUI 组件，需要先安装依赖项和引入 AMapUI 库。

步骤如下：

1. 安装依赖项

在项目根目录下使用以下命令安装 AMap 和 AMapUI 依赖项：

npm install --save react-amap amapui-wrapper

2. 引入 AMapUI 库

在 React 组件中引入 AMapUI 库：

import AMapUI from 'amapui-wrapper';

3. 使用 AMapUI 组件

使用 AMapUI 组件，需要先引入 AMap 组件：

import React, { Component } from 'react';
import { Map } from 'react-amap';
import AMapUI from 'amapui-wrapper';

class MyMap extends Component {
  componentDidMount() {
    AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
      const poiPicker = new PoiPicker({
        input: 'picker-input', // input 输入框 id
      });
      poiPicker.on('poiPicked', (poiResult) => {
        console.log(poiResult);
      });
    });
  }

  render() {
    return (
      <Map>
        <div id='picker-input'></div>
      </Map>
    );
  }
}

export default MyMap;

在这个示例中，我们使用 AMapUI 中的 PoiPicker 组件，在地图上添加了一个输入框。当用户输入关键字并选择了一个 POI 点时，会触发 poiPicked 事件，并打印选择的 POI 点信息。

需要注意的是，AMapUI 组件的使用方式和普通的 React 组件不同，需要在 componentDidMount 生命周期方法中使用 AMapUI.loadUI 方法进行加载。