@vuemap/vue-amap高德vue组件库常用技巧（十）- 插件使用

@vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。首页地址：vue-amap.guyixi.cn/

高德JSAPI2.0提供了很多常用插件，组件库中以内置大部分常用插件，对于部分不常用的插件也提供了hooks使用，剩余完全没有封装的则需要自己使用原生方式调用，下面介绍下组件库中使用插件的各种方式。

一、直接使用组件

直接使用组件是最方便的方式，常用的地图控件、聚合插件、鼠标插件（点、线、面绘制）等都以做了组件封装，并将操作习惯调整为vue的方式，通过属性控制以及事件回调实现各种功能，示例

<template>
  <div class="map-page-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
      @click="clickMap"
      @init="initMap"
    >
      <el-amap-mouse-tool
        v-if="created"
        :type="type"
        :auto-clear="true"
        @draw="draw"
      />
    </el-amap>
  </div>
  <div class="toolbar">
    <button @click="created = !created">
      {{ created ? '销毁' : '创建' }}
    </button>
    <button @click="changeMarker('marker')">
      绘制标号
    </button>
    <button @click="changeMarker('circle')">
      绘制圆
    </button>
    <button @click="changeMarker('rectangle')">
      绘制矩形
    </button>
    <button @click="changeMarker('polyline')">
      绘制线
    </button>
    <button @click="changeMarker('polygon')">
      绘制面
    </button>
    <button @click="changeMarker('measureArea')">
      计算面积
    </button>
    <button @click="changeMarker('rule')">
      计算距离
    </button>
    <button @click="changeMarker('rectZoomIn')">
      框选放大地图
    </button>
    <button @click="changeMarker('rectZoomOut')">
      框选缩小地图
    </button>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap, ElAmapMouseTool} from "@vuemap/vue-amap";

const center = ref([121.5273285, 31.21515044]);
const zoom = ref(16);
const type = ref('marker');
const created = ref(true);

const clickMap = (e: any) => {
  console.log('click map: ', e);
}
const initMap = (map) => {
  console.log('init map: ', map);
}
const draw = (e, target) => {
  console.log('绘制完成 : ', e, target)
}
const changeMarker = (newType: string) => {
  type.value = newType;
}

</script>

<style scoped>
</style>

二、使用组件库HOOKS

组件库提供了3个常用的插件hooks封装，2个定位、1个天气插件，需要注意的是hooks的使用也是要在JSAPI加载完成后才能执行，所以需要在lazyAMapApiLoaderInstance中执行hooks操作。示例

<template>
  <div class="map-page-container">
    <el-amap
      v-if="center"
      :center="center"
      :zoom="18"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, onBeforeMount} from 'vue';
import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";

const center = ref(null)

onBeforeMount(() => {
  lazyAMapApiLoaderInstance.then(() => {
    useGeolocation({
      enableHighAccuracy: true,
      needAddress: true
    }).then(res => {
      const {getCurrentPosition, getCityInfo} = res;
      getCurrentPosition().then(currentPosition => {
        center.value = currentPosition.position.toArray();
        console.log('currentPosition: ', currentPosition)
      });
      getCityInfo().then(cityResult => {
        console.log('cityResult: ', cityResult)
      })
    })
  })
})

</script>

<style scoped>

</style>

三、直接使用高德原生插件对象

如果自身的定制开发要求太高，组件库的封装不适合的话，可以通过加载插件来手动实现插件的使用，高德官方加载插件有2种方式，一种是随着JSAPI的主包一起加载，另一种是在主包加载后手动异步加载。下面就这两种情况详细介绍下：

1、全局加载

全局随JSAPI主包一起加载时需要在initAMapApiLoader方法调用时传入plugins属性。

import {initAMapApiLoader} from '@vuemap/vue-amap'; 
initAMapApiLoader(
  { 
    key: 'YOUR_KEY', 
    plugins: ['AMap.HawkEye']
  }
)

全局加载完成后就可以在地图的init事件内初始化插件

<template>
  <div class="map-page-container">
    <el-amap
      :center="center"
      :zoom="zoom"
      @init="init"
    />
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap} from "@vuemap/vue-amap";

const zoom = ref(12);
const center = ref([121.59996, 31.197646]);
const init = (map: any) => {
  const eye = new AMap.HawkEye();
  map.addControl(eye);
  console.log('map init: ', map)
}
</script>

<style>
.map-page-container{
  height: 500px;
}
</style>

2、局部按需加载

如果不想在全局加载插件，那么可以通过AMap.plugin或者地图实例的plugin方法来异步加载插件，示例：

<template>
  <div class="map-page-container">
    <el-amap
      :center="center"
      :zoom="zoom"
      @init="init"
    />
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap} from "@vuemap/vue-amap";

const zoom = ref(12);
const center = ref([121.59996, 31.197646]);

const init = (map: any) => {
  map.plugin('AMap.ToolBar', () => {
    const toolBar = new AMap.ToolBar();
    map.addControl(toolBar);
  })

  console.log('map init: ', map)
}

</script>

<style>
.map-page-container{
  height: 500px;
}
</style>

在这个示例中我们通过在init事件中执行map.plugin('AMap.ToolBar')来异步加载AMap.ToolBar，加载完成后在回调中我们即可使用AMap.ToolBar插件。