高德地图封装使用

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { ref, onMounted, shallowRef } from 'vue'
// 获取div
const mapRef = ref()
// 接收传入的map配置对象
interface PropsType {
  options?: {
    [key: string]: any
  }
  plugins?: any[]
  // 也可以是一个函数来返回上面的两个内容 函数会接收AMap类
  optionsFunc?(AMap?: any, callback?: any): Pick<PropsType, 'options'>
}
const props = defineProps<PropsType>()

// emit事件
const emit = defineEmits<{
  (e: 'mapClick', ev: any): void
}>()
// 创建map对象
let map = shallowRef<any>({})
// 页面挂载后  初始化地图
onMounted(() => {
  AMapLoader.load({
    key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: props.plugins || [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
      //重点就是这个
      version: '1.1',
      plugins: ['geo/DistrictExplorer']
    }
  })
    .then((AMap) => {
      let afterCallback: any
      if (props.optionsFunc) {
        // 这里使用了一下高阶函数 传入一个函数来接受一个函数  接收到的函数会再创建完map后面执行
        const mapData = props.optionsFunc(AMap,
                                          (callback: any) => (afterCallback = callback)
                                         )
        map.value = new AMap.Map(mapRef.value, mapData.options)
      } else {
        map.value = new AMap.Map(mapRef.value, props.options)
      }
      // 执行回调函数
      afterCallback && afterCallback(map.value)
      // 写入配置对象 进行初始化

      // 触发点击事件
      map.value.on('click', function (ev: any) {
        emit('mapClick', ev)
      })
    })
    .catch((e) => {
      console.log(e)
    })
})
</script>
<template>
  <div ref="mapRef" class="map"></div>
</template>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>

<script lang="ts" setup>

// 地图相关配置
function mapClick(ev: any) {
  console.log(ev)
}
// 返回 高德地图 配置对象
function mapFunc(AMap: any, callBack: any) {

  // 配置回调函数 添加点击事件
  callBack((map: any) => {

  })

  return {
    options: {
      zoom: 4,
      center: [100.858852, 40.739311],
      showIndoorMap: false,
      isHotspot: false,
      defaultCursor: 'pointer',
      touchZoomCenter: 1,
      pitch: 0,
      viewMode: '3D',
      resizeEnable: true
    }
  }
}
</script>

<template>
  <AMapVue :options-func="mapFunc" :plugins="['AMap.Scale']" @map-click="mapClick">
  </AMapVue>
</template>