# 安装使用
兼容性
AMapVue
建议搭配vue >= 2.6.11
, AMap 2.0
版本使用
如果您在使用AMap 1.4.*
,请搭配AMapVue 1.4.*
使用
yarn add @amap/amap-vue@^1.4.0 # 或 npm install --save @amap/amap-vue@^1.4.0
1
# 1. 引入依赖
yarn add @amap/amap-vue # 或 npm install --save @amap/amap-vue
1
最新版本:2.0.13
# 2. 在 Vue 中使用
# 方法1:全局加载
在你的 Vue 项目入口文件(例如main.js
)里全局引入
import AmapVue from '@amap/amap-vue';
AmapVue.config.version = '2.0'; // 默认2.0,这里可以不修改
AmapVue.config.key = '您的JSAPI KEY';
AmapVue.config.plugins = [
'AMap.ToolBar',
'AMap.MoveAnimation',
// 在此配置你需要预加载的插件,如果不配置,在使用到的时候会自动异步加载
];
Vue.use(AmapVue);
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
现在你已经可以使用 AMap-Vue 的所有组件和功能了。
# 方法2:按需引入
在你的 Vue 项目入口文件(例如main.js
)里初始化配置
// main.js
import AmapVueConfig from '@amap/amap-vue/lib/config';
AmapVueConfig.key = '您的JSAPI KEY';
1
2
3
2
3
在你的 Vue 组件里按需引入组件
<script>
// your-component.vue
import Amap from '@amap/amap-vue/lib/amap';
import AmapMarker from '@amap/amap-vue/lib/marker';
export default {
components: {
Amap,
AmapMarker,
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
全部组件与路径的对照表请参考下文中的附录
# 进阶:使用 babel-plugin-import 插件自动按需加载
如果你的项目构建流程基于 babel,你可以引入 babel-plugin-import 插件,只需要在项目中引入 babel-plugin-import
yarn add --dev babel-plugin-import # 或 npm install --save-dev babel-plugin-import
1
然后在 babel 配置文件(如babel.config.js
或.babelrc
)中配置
// babel.config.js
module.exports = {
// ... 你的其他配置
plugins: [
// ... 你的其他 babel 插件
[
'import',
{
libraryName: '@amap/amap-vue',
libraryDirectory: 'lib',
camel2DashComponentName: true,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
接下来你可以使用展开语法来import
多个组件,例如
<script>
// your-component.vue
import { Amap, Marker } from '@amap/amap-vue';
export default {
components: {
Amap,
AmapMarker: Marker,
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 附录:组件路径对照表
组件或功能 | 引入路径(@amap/amap-vue/lib/* ) |
---|---|
withAmap | with-amap |
loadPlugins | load-plugins |
loadAmap | load-amap |
config | config |
<amap> | amap |
<amap-bezier-curve> | bezier-curve |
<amap-canvas-layer> | canvas-layer |
<amap-circle> | circle |
<amap-circle-marker> | circle-marker |
<amap-control-bar> | control-bar |
<amap-custom-layer> | custom-layer |
<amap-district-layer-country> | district-layer-country |
<amap-district-layer-province> | district-layer-province |
<amap-district-layer-world> | district-layer-world |
<amap-ellipse> | ellipse |
<amap-flexible-layer> | flexible-layer |
<amap-hawk-eye> | hawk-eye |
<amap-image-layer> | image-layer |
<amap-info-window> | info-window |
<amap-label-marker> | label-marker |
<amap-labels-layer> | labels-layer |
<amap-map-type> | map-type |
<amap-marker> | marker |
<amap-marker-cluster> | marker-cluster |
<amap-mouse-tool> | mouse-tool |
<amap-polygon> | polygon |
<amap-polyline> | polyline |
<amap-rectangle> | rectangle |
<amap-road-net-layer> | road-net-layer |
<amap-satellite-layer> | satellite-layer |
<amap-scale> | scale |
<amap-text> | text |
<amap-tile-layer> | tile-layer |
<amap-tool-bar> | tool-bar |
<amap-traffic-layer> | traffic-layer |