安装使用

兼容性

AMap-React需要搭配react >= 16.8.0, AMap >= 2.0版本使用

1. 引入依赖

yarn add @amap/amap-react # 或 npm install --save @amap/amap-react

最新版本：0.1.3

2. 在 React 中使用

1. 配置

在你的 React 项目入口文件（例如index.js）里全局引入配置

import { config as AmapReactConfig } from '@amap/amap-react';

AmapReactConfig.version = '2.0'; // 默认2.0，这里可以不修改

AmapReactConfig.key = '您的JSAPI KEY';

AmapReactConfig.plugins = [

'AMap.ToolBar',

'AMap.MoveAnimation',

// 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载

];

2. 使用组件

在你的 React 组件里引入组件

// YourComponent.vue

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

function YourComponent(props) {

return (

<Amap>

<Marker position={[...]} />

</Amap>

);

}

全部可使用的组件清单请参考附录。

3.按需加载

要使用按需引入，你需要避免全量引入import * as AmapReact from '@amap/amap-react'。

AMap-React默认支持基于 ES modules 的 Tree Shaking，通常来说，你只需要直接按上述的import { Amap } from '@amap/amap-react'的方式引入就可以有按需加载的效果。

如果你的构建工具链没有默认支持 Tree Shaking，比如你使用 webpack@1.x，或者 Tree Shaking 没有效果，这种情况下你可以引入 babel-plugin-import 插件

yarn add --dev babel-plugin-import # 或 npm install --save-dev babel-plugin-import

然后在 babel 配置文件（如babel.config.js或.babelrc）中配置

// babel.config.js

module.exports = {

// ... 你的其他配置

plugins: [

// ... 你的其他 babel 插件

[

'import',

{

libraryName: '@amap/amap-react',

libraryDirectory: 'lib',

},

],

],

};