初始化

---

完整导入

一般项目中，对于 vue-amap 的初始化只需要调用 initAMapApiLoader 方法即可。

NPM 安装：

import App from './App.vue'
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
// import VueAMapLoca from '@vuemap/vue-amap-loca';
// import VueAMapExtra from '@vuemap/vue-amap-extra';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用
  //Loca:{
  //  version: '2.0.0'
  //} // 如果需要使用loca组件库，需要加载Loca
})

createApp(App)
    .use(VueAMap)
  //.use(VueAMapLoca)
  //.use(VueAMapExtra)
    .mount('#app')

CDN 引入：

window.VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
});

自动导入

首先你需要安装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',
  //Loca:{
  //  version: '2.0.0'
  //} // 如果需要使用loca组件库，需要加载Loca
})

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

警告

当项目中Element-Plus也使用自动导入功能时会与地图组件冲突，需要使用unplugin-vue-components@0.17.15之后的版本

使用Element-plus的自动导入时，配置需要修改为如下：

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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {VueAmapResolver} from '@vuemap/unplugin-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver({
        exclude: /^ElAmap[A-Z]*/
      }),VueAmapResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        exclude: /^ElAmap[A-Z]*/
      }),VueAmapResolver()],
    }),
  ]
})

Volar兼容

在使用vscode开发时，需要配置global.d.ts才能在按需导入时有对应的typescript提示，tsconfig.json配置方式：

{
  "include": ["./node_modules/@vuemap/vue-amap/global.d.ts", "./node_modules/@vuemap/vue-amap-loca/global.d.ts", "./node_modules/@vuemap/vue-amap-extra/global.d.ts"]
}

Promise

在定制化程度较高的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance。

NPM 安装：

import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import { lazyAMapApiLoaderInstance } from '@vuemap/vue-amap';

initAMapApiLoader({
  key: 'YOUR_KEY',
});

createApp(App)
    .use(VueAMap)
    .mount('#app')

lazyAMapApiLoaderInstance.then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
});

CDN 引入：

window.VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
});

window.VueAMap.lazyAMapApiLoaderInstance.then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
});

initAMapApiLoader懒加载

除了在main.js中执行initAMapApiLoader外，还可以在需要的页面执行该方法，实现高德JSAPI的懒加载，至于CSS文件还是在main.js中正常加载。

1、创建mapLoadUtil.js文件

import {initAMapApiLoader} from '@vuemap/vue-amap';
export function initMapLoad(){
  initAMapApiLoader({
    key: 'YOUR_KEY',
    //Loca:{
    //  version: '2.0.0'
    //} // 如果需要使用loca组件库，需要加载Loca
  })
}

2. 在需要加载地图的页面的onBeforeMount生命周期中执行

import {onBeforeMount} from 'vue'
import {initMapLoad} from '@/util/mapLoadUtil.js'

onBeforeMount(() => {
  initMapLoad()
})

参数

参数名	类型	默认值	描述
key	String	``	高德 Key
version	String	2.0	指定要加载的 JSAPI 的版本，缺省时默认为 2.0
plugins	Array	``	需要使用的的插件列表，如比例尺'AMap.Scale'等 插件列表
AMapUI	Object({version:1.1,plugins:[]})	``	UI的参数配置 示例，version默认就是1.1，plugins是需要加载的插件，可以看示例连接
Loca	Object	{version: '2.0.0'}	Loca 版本
serviceHost	String	''	1.1.0版本新增，代理服务器域名或ip地址，新版本密钥必须配置代理服务器或者安全密钥，优先使用该配置，参考网址
securityJsCode	String	''	1.1.0版本新增，静态安全密钥(不安全，建议开发环境用),新版本密钥必须配置代理服务器或者安全密钥，参考网址
offline	Boolean	false	1.1.5版本新增是否离线部署，默认false，当设置为true时将不加载JS API，需要自己在html里加载所需要的JS API和loca，主要用于局域网使用