AMap-Vue

# 安装使用

兼容性

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

现在你已经可以使用 AMap-Vue 的所有组件和功能了。

# 方法2：按需引入

在你的 Vue 项目入口文件（例如main.js）里初始化配置

// main.js
import AmapVueConfig from '@amap/amap-vue/lib/config';
AmapVueConfig.key = '您的JSAPI KEY';
1
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

全部组件与路径的对照表请参考下文中的附录

# 进阶：使用 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

接下来你可以使用展开语法来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

# 附录：组件路径对照表

组件或功能 引入路径（@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

← 游乐场 →