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

1,651 阅读3分钟

简介

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

加载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在同一个账户下
  • 自定义样式需要发布后才能使用