自定义地图组件

1.1.2版本开始支持自定义地图组件，通过加载registerMixin(选项式API)实现自己的组件，2.1.0版本开始支持通过useRegister(组合式API)来实现自定义组件。

1、选项式API 1.1.2+

1.1使用方法

首先需要导入 registerMixin，再methods中创建一个__initComponent方法，该方法是子组件被创建时调用，可以使用parentInstance.$amapComponent获取到上级组件的实例对象

1.2基础示例代码

创建test.vue组件

<template>
  <div>
  </div>
</template>

<script>
import {registerMixin} from "@vuemap/vue-amap";
import {defineComponent} from "vue";

export default defineComponent({
  name: "test",
  mixins: [registerMixin],
  methods: {
    __initComponent(){
      console.log('this.parentInstance: ', this.parentInstance);
      let map = this.parentInstance.$amapComponent;
      let position = this.parentInstance.$amapComponent.getCenter();
      let marker = new AMap.Marker({
        position: position
      })
      map.add(marker);
    }
  }
})
</script>

地图加载代码

<template>
  <div id="app">
    <el-amap :center="[116.335036, 39.900082]" :zoom="8">
      <test />
    </el-amap>
  </div>
</template>

<script>
import test from './components/test.vue'
import {defineComponent} from "vue";
export default defineComponent({
  name: 'App',
  components: {
    test
  },
})
</script>

<style>
#app {
  height: 600px;
}
</style>

parentInstance的说明

parentInstance通过provide为所有子组件提供实例，parentInstance指向的是最近的一个提供【parentInstance】的vue组件，当前提供parentInstance的组件有以下几个

组件名称	说明
el-amap	地图组件，根组件存在，提供map实例
el-loca	Loca容器，所有loca图层的容器，loca图层必须放在el-loca内
el-amap-layer-labels	标号图层，只可以放el-amap-label组件
el-amap-layer-vector	矢量图层，只可以放矢量的子图层
el-amap-layer-three	三维图层，只可以放el-amap-three-gltf组件

首先需要导入 useRegister，useRegister的第一个参数是创建高德地图组件实例的回调方法，有两个参数，一个是props定义的所有属性和其对应的值，另一个是上级父组件的高德地图实例。 useRegister的第二个参数是一个TInitComponentProps类型，具体参数说明见下表。 useRegister会返回一个对象，包含两个属性，一个是$$getInstance用于获取高德SDK的实例，这个可以通过defineExpose开放出去，第二个是parentInstance，是上级的vue组件实例，可以获取常用的属性。

2.2基础示例代码

创建CustomMarker.vue组件

<script setup lang="ts">
  import {useRegister} from '@vuemap/vue-amap'

  defineProps({
    position: {
      type: Array,
      required: true
    }
  })

  const emits = defineEmits(['init'])
  let $amapComponent: AMap.Marker

  const {$$getInstance, parentInstance} = useRegister<AMap.Marker, any>((options, parentComponent) => {
    return new Promise<AMap.Marker>((resolve) => {
      $amapComponent = new AMap.Marker(options);
      parentComponent.add($amapComponent)
      resolve($amapComponent)
    })
  }, {
    emits,
    destroyComponent () {
      if ($amapComponent && parentInstance?.$amapComponent) {
        $amapComponent.setMap(null);
        $amapComponent = null as any;
      }
    },
  })

  defineExpose({
    $$getInstance
  })
</script>

<template>
  <div></div>
</template>

<style scoped>

</style>