# @vuemap/vue-amap

> 高德地图vue3版本封装

Latest version **2.1.17** (published 2025-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vuemap/vue-amap
pnpm add @vuemap/vue-amap
yarn add @vuemap/vue-amap
bun add @vuemap/vue-amap
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.17 |
| Published | 2025-09-01 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 5.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 353 |
| Author | guyangyang |
| Maintainers | a407042815 |
| Keywords | vue-amap, amap, map, vue3, vue, 高德 |

## Links

- npm: https://www.npmjs.com/package/@vuemap/vue-amap
- Repository: https://github.com/yangyanggu/vue-amap
- Homepage: https://vue-amap.guyixi.cn
- Issues: https://gitee.com/guyangyang/vue-amap/issues
- npm.io page: https://npm.io/package/@vuemap/vue-amap

## Dependencies (5)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@vuemap/amap-xyz-layer](https://npm.io/package/@vuemap/amap-xyz-layer.md) 0.0.15
- [@vuemap/amap-jsapi-types](https://npm.io/package/@vuemap/amap-jsapi-types.md) ^0.0.17
- [@vuemap/district-cluster](https://npm.io/package/@vuemap/district-cluster.md) 0.0.12
- [@vuemap/amap-jsapi-loader](https://npm.io/package/@vuemap/amap-jsapi-loader.md) 1.0.4

## Recent versions

- 2.1.17 (latest) — 2025-09-01
- 2.1.0-beta2 (beta) — 2024-02-03
- 0.1.17 (legacy) — 2023-11-03
- 1.1.24 (legacy-vue3) — 2023-08-22
- 1.1.21 (next) — 2023-02-07
- 2.1.16 — 2025-07-03
- 2.1.15 — 2025-06-09
- 2.1.14 — 2025-06-02
- 2.1.13 — 2025-05-22
- 2.1.12 — 2025-04-25
- 2.1.11 — 2025-04-10
- 2.1.10 — 2025-04-09
- 2.1.9 — 2024-12-26
- 2.1.8 — 2024-10-10
- 2.1.7 — 2024-10-10
- … 134 more at https://npm.io/package/@vuemap/vue-amap/versions

## README

# @vuemap/vue-amap
[![npm (tag)](https://img.shields.io/npm/v/@vuemap/vue-amap)](https://www.npmjs.org/package/@vuemap/vue-amap)
[![NPM downloads](https://img.shields.io/npm/dm/@vuemap/vue-amap.svg)](https://npmjs.org/package/@vuemap/vue-amap)
![JS gzip size](https://img.shields.io/bundlephobia/minzip/%40vuemap/vue-amap/latest)
[![NPM](https://img.shields.io/npm/l/@vuemap/vue-amap)](https://gitee.com/guyangyang/vue-amap)
[![star](https://gitee.com/guyangyang/vue-amap/badge/star.svg?theme=dark)](https://gitee.com/guyangyang/vue-amap/stargazers)
[![GitHub Repo stars](https://img.shields.io/github/stars/yangyanggu/vue-amap)](https://github.com/yangyanggu/vue-amap)

## 其他语言说明
* [English](./README_en.md)

## 文档
**[https://vue-amap.guyixi.cn](https://vue-amap.guyixi.cn)**

> @vuemap/vue-amap是一套基于Vue3 和高德地图2.0的地图组件。
> 该版本对原vue-amap组件进行升级，主要适配amap2.0相关的接口，同时调整事件绑定形式，调整为使用v-on进行事件绑定。
> 组件中将会对高德可视化组件loca进行封装，同时提供threejs的接口
> 该项目基于 https://github.com/ElemeFE/vue-amap/ 开发
> 支持全量导入、按需导入和自动导入

>vue2请使用0.x版本，对应分支vue2

```html
觉得有用可以给个star
```

## 捐赠支持
<img src="./image/zhifubao.jpg" alt="支付宝" width="270px" />
<img src="./image/weixin.png" alt="微信" width="270px"/>

## 安装
```
// 安装核心库
npm i -S @vuemap/vue-amap
// 安装loca相关库
npm i -S @vuemap/vue-amap-loca
// 安装其他扩展库，主要为threejs相关
npm i -S @vuemap/vue-amap-extra
```

## 快速上手

引入@vuemap/vue-amap

```javascript
// 引入vue-amap
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

// 初始化vue-amap
initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用
  //Loca:{
  //  version: '2.0.0'
  //} // 如果需要使用loca组件库，需要加载Loca
});
createApp(App).use(VueAMap)

```

## 自动导入
首先你需要安装```unplugin-vue-components``` 、 ```unplugin-auto-import``` 、 ```@vuemap/unplugin-resolver```这三款插件

> 注意，对于使用@vuemap/vue-amap@1版本的来说，```@vuemap/unplugin-resolver```版本必须使用1.x.x版本

### 使用@vuemap/vue-amap@latest 版本
```shell
npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver
```

### 使用@vuemap/vue-amap@1 版本
```shell
npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1
```

然后在main.ts中导入css和进行初始化key
```ts
import App from './App.vue'
import {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
    key: 'YOUR_KEY'
})

createApp(App)
    .mount('#app')
```
再修改配置文件，把下列代码插入到你的 Vite 或 Webpack 的配置文件中
```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {VueAmapResolver} from '@vuemap/unplugin-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VueAmapResolver()],
    }),
    Components({
      resolvers: [VueAmapResolver()],
    }),
  ]
})
```

## 组件

### 地图

```vue
<el-amap  :zoom="zoom" :center="center">
</el-amap>
```

---
_Source: https://npm.io/package/@vuemap/vue-amap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._