AMap-React

Using AMap with React in an easy way.

快速上手 →

React 驱动

支持 React 的组件树、生命周期、props 绑定、hooks 等特性，类似的 API、类似的开发思维。

简洁至上

无需关心地图和地图上的各种元素的加载、初始化、更新、销毁，只需要像普通视图组件一样使用。

可集成、可扩展

可以在地图内嵌入 DOM 组件，开发沉浸式地图应用。通过 hooks 获取 AMap.Map 对象，扩展更多地图组件。

现已支持 AMap JSAPI 2.0！

npm install --save @amap/amap-react

import React from 'react';
import { Amap, Marker } from '@amap/amap-react';

export default function () {
  return (
    <div style={{ width: '100%', height: '400px' }}>
      <Amap
        mapStyle="amap://styles/whitesmoke"
        zoom={15}
        center={[116.473179, 39.993169]}
      >
        <Marker
          position={[116.473179, 39.993169]}
          label={{
            content: 'Hello, AMap-React!',
            direction: 'bottom',
          }}
        />
      </Amap>
    </div>
  );
}