用react写一个高德地图

要在React中使用高德地图，需要使用高德地图JavaScript API和React组件。以下是一个简单的示例：

首先，在 `index.html` 文件中，添加高德地图JavaScript API的引用：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

然后，在React组件中，创建一个 `div` 元素，用于显示地图：

import React, { Component } from 'react';

class Map extends Component {
  componentDidMount() {
    const map = new window.AMap.Map(this.mapContainer, {
      center: [116.397428, 39.90923],
      zoom: 13
    });
  }

  render() {
    return (
      <div
        ref={(el) => (this.mapContainer = el)}
        style={{ width: '100%', height: '500px' }}
      />
    );
  }
}

export default Map;

在 `componentDidMount` 方法中，我们创建了一个新的地图实例，并将其绑定到 `div` 元素上。 `center` 属性设置地图的中心点， `zoom` 属性设置了地图的缩放级别。

最后，将 `Map` 组件添加到你的应用程序中：

import React from 'react';
import Map from './Map';

function App() {
  return (
    <div className="App">
      <Map />
    </div>
  );
}

export default App;

这个简单的示例演示了如何在React中使用高德地图。你可以根据你的需求使用不同的高德地图JavaScript API方法和React组件，来自定义你的地图。