在taro中使用react开发小程序使用高德地图

可以使用 `react-amap` 这个库来在 Taro 中使用高德地图。

首先，需要在项目中安装 `react-amap`：

npm i react-amap --save

然后，在需要使用地图的页面中引入 `react-amap` 和 `@amap/amap-jsapi-loader`：

import React, { Component } from 'react';
import { Map } from 'react-amap';
import { AMapLoader } from '@amap/amap-jsapi-loader';

class MapPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      center: [116.397428, 39.90923],
      zoom: 13,
    };
  }

  async componentDidMount() {
    const loader = new AMapLoader({
      key: 'your amap key',
      version: '2.0',
      plugins: [],
    });

    const AMap = await loader.load();
    console.log('AMap', AMap);
  }

  render() {
    const { center, zoom } = this.state;

    return (
      <Map
        amapkey="your amap key"
        center={center}
        zoom={zoom}
      />
    );
  }
}

export default MapPage;

注意需要将 `amapkey` 替换为你自己的高德地图开发者 Key。

可以通过 `center` 和 `zoom` 属性来设置地图的中心点和缩放级别。在 `componentDidMount` 方法中，使用 `@amap/amap-jsapi-loader` 来异步加载高德地图 JavaScript API，并且可以在加载完成后打印 AMap 对象来验证是否加载成功。

更多关于 `react-amap` 和高德地图的使用方法可以参考官方文档：[https://elemefe.github.io/react-amap/components/map](https://elemefe.github.io/react-amap/components/map)。