yangyanggu/vue-amap

高德地图封装 for vue2 vue3.0

@vuemap/vue-amap

文档

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

觉得有用可以给个star

捐赠支持

安装

// 安装核心库
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

// 引入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 版本

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver

使用@vuemap/vue-amap@1 版本

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1

然后在main.ts中导入css和进行初始化key

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 的配置文件中

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()],
    }),
  ]
})

组件

地图

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