基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。

react-amap 这是一个基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。

文档实例预览: Github Web | Gitee Web

特性

• ️ 自动加载高德地图 SDK（通过创建 Script 标签的形式加载），包括第三方 SDK。
• 使用 Typescript 编写，集成高德地图 SDK @type 声明文件（包括中文注释）。
• ⚛️ 支持 React Hook 新增特性（需要 React 16.8+）。
• 不依赖任何第三方组件。

安装

不依赖 uiw 组件库

npm install @uiw/react-amap --save

使用

import { Map, APILoader } from '@uiw/react-amap';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
      <Map />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

Map 组件

Map 组件是其他组件的基础，Map 组件会给所有的子组件注入两个属性 map，container 和 AMap，

️ 注意

1. 组件 <Map> 必须包裹在 <APILoader> 组件内，该组件作用是加载高德地图 SDK。
2. 其他地图组件必须作为 <Map> 的子组件使用；

import { Map, APILoader } from '@uiw/react-amap';

基本用法

Map 的父组件必须具有宽度和高度；

import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
      <Map />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

参数设置

import React, { Fragment } from 'react';
import { Map, APILoader } from '@uiw/react-amap';

function Demo() {
  const [dragEnable, setDragEnable] = useState(true);
  const [display, setDisplay] = useState(true);
  const [zoom, setZoom] = useState(15);
  const [viewMode, setViewMode] = useState('3D');
  return (
    <Fragment>
      <button onClick={() => setDragEnable(!dragEnable)}>{dragEnable ? '禁用' : '启用'}拖拽</button>
      <button onClick={() => setDisplay(!display)}>{display ? '卸载' : '加载'}地图</button>
      <button onClick={() => setViewMode(viewMode === '3D' ? '2D' : '3D')}>{viewMode}地图</button>
      <button onClick={() => setZoom(zoom + 1)}>放大 +1 -> ({zoom})</button>
      <button onClick={() => setZoom(zoom - 1)}>缩小 -1 -> ({zoom})</button>
      <div style={{ width: '100%', height: 350 }}>
        {display && (
          <Map
            dragEnable={dragEnable}
            zoom={zoom}
            viewMode={viewMode}
            pitch={viewMode === '2D' ? 0 : 70}
          />
        )}
      </div>
    </Fragment>
  );
}

ReactDOM.render((
  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
), _mount_);

Ref

获取地图实例对象。

import React, { useEffect, useRef, Fragment } from 'react';
import { Map, APILoader } from '@uiw/react-amap';

function Demo() {
  const mapRef = useRef();
  useEffect(() => {
    console.log('mapRef:', mapRef)
  }, []);
  return (
    <div style={{ width: '100%', height: 330 }}>
      <Map
        layers={[new AMap.TileLayer.Satellite()]}
        ref={(instance) => {
          if (instance && instance.map) {
            const bounds = instance.map.getBounds();
            console.log('instance', instance);
          }
        }}
      />
      <Map
        layers={[new AMap.TileLayer.Satellite()]}
        ref={mapRef}
      />
    </div>
  );
}

ReactDOM.render((
  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
), _mount_);

事件触发

import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
      <Map
        onComplete={(data, de) => {
          console.log('地图加载完成！', data, de);
        }}
        onClick={() => {
          console.log('点击事件！');
        }}
      />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);