@vuemap/vue-amap组件初始化与加载

简介

    @vuemap/vue-amap的加载主要是通过initAMapApiLoader方法，内部实现则是使用高德官方提供的@amap/amap-jsapi-loader插件来实现，通过动态添加script来实现地图JS文件的加载。

地图仓库：github 、 gitee

文档地址：Vue3 、 Vue2

加载JS文件

    正常来说加载JS文件都会放在vue的main.js文件中，不论是vue2还是vue3，都可以通过以下方式获取initAMapApiLoader方法。

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

    获取到initAMapApiLoader后我们需要传入必须的参数来加载JS文件。

initAMapApiLoader({
    key: 'YOUR_KEY', // 必填，需要填入从高德开放平台的控制台中创建的web js类型密钥
    version: '2.0', // 非必填，不填时默认为2.0
    plugins: [], // 加载JS时同步加载的插件，此处加载的插件可以全局使用，示例 ['AMap.Scale']
    AMapUI: {
      version: '1.1',
      plugins:[]  
    }, // 加载UI插件，默认为空，不加载AMapUI
    Loca: {
        version: '2.0.0'
    }, // 加载LOCA的版本，默认加载并且版本为2.0.0
    serviceHost: '', // 代理服务器域名或ip地址，新版本密钥必须配置代理服务器或者安全密钥，优先使用该配置
    securityJsCode: '', // 静态安全密钥，新版本在控制台创建应用时会同时提供安全密钥，当初始化不提供安全密钥或者安全代理时，部分服务不能使用，比如搜索、自定义地图样式
    offline: false, // 是否离线加载JS,当配置为true时，不执行loader功能，这时候需要自己在html的head中配置高德地图的script
})

申请密钥请访问高德开放平台

注册组件

    对于vue2只能使用全量注册的方式，但vue3支持按需导入注册。对于vue2的组件，普通的组件和threejs相关的组件是分在两个包中，如果需要使用

vue2注册示例

import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
});

//如果需要使用自定义的threeJS相关的组件，需要格外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);

vue3示例

全量加载

import App from './App.vue'
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
    key: 'YOUR_KEY'
})

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

使用自动导入插件按需加载

自动导入需要配合插件使用，插件安装：

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

在main.js中加载JS文件

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配置中配置插件：

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

最终示例

示例代码

<template>
  <div class="map-page-container">
    <el-amap ref="map" :min-zoom="10" :max-zoom="22" 
    :center="center" :zoom="zoom" @init="init" @click="click">
    </el-amap>
  </div>
  <div class="toolbar">
    <button @click="getMap()">获取地图实例</button>
  </div>
</template>
<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  data() {
    return {
      zoom: 16,
      center: [121.59996, 31.197646],
      map: null,
    };
  },
  methods: {
    getMap() {
      // bmap vue component
      console.log('$refs: ', this.$refs.map.$$getInstance())
    },
    init(o) {
      this.map = o;
      console.log(o.getCenter())
      console.log(this.$refs.map.$$getInstance())
    },
    click(){
      alert('click map')
    }
  }
});
</script>
<style>
</style>

示例效果

常见问题

1. 地图组件配置好了但地图没有出现
   答：一般地图没有出现的话有两种情况，第一种是地图el-amap的外围容器没有提供高度导致地图初始化失败，第二种是vue3中出现，由于element-plus的自动导入插件也是使用的el开头的命名，因此会导致地图组件被识别为element-plus的一个插件，需要在element-plus的配置中去除el-amap，示例如下：

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]*/  // 核心代码，去除ElAmap相关的组件
      }),VueAmapResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        exclude: /^ElAmap[A-Z]*/  // 核心代码，去除ElAmap相关的组件
      }),VueAmapResolver()],
    }),
  ]
})

2、配置了自定义样式但没有生效
答：

• 新版本的key需要配合安全密钥使用，因此在初始化时需要传入安全密钥或者安全代理参数
• 自定义样式需要与key在同一个账户下
• 自定义样式需要发布后才能使用