【vue3 + element-plus + 高德webApi】地图选址、海量标点、标点信息弹窗自定义数据信息、选中数据处理替换标点icon

【项目个人笔记记录 ！！！】

个人项目笔记记录
基于高德官方开放api进行修改 ： https://lbs.amap.com/demo/list/js-api-v2

项目功能（需求点）：

1、form表单地图选址功能
2、基于form表单查询的数据 对地图进行海量标点、画标点画圈辐射范围
3、基于标点 进行点击 实现模拟态弹窗展示客户信息
4、对客户拟态弹窗 进行选中、取消选中操作 进行数据处理 从而替换icon来实现选中态和未选中态

1、地图选址功能 ：

交互操作：

1、点击form表单字段弹出 地图选址拟态弹窗
2、进行地图点击选点（或 select组件搜索地点 并点击数据行） 从而获取经纬度以及地点名称 同时将地址名称数据绑定到selected组件上 而后点击确认将数据回传到form表单字段上

效果图

地图选址功能模块代码

因代码涉及其他业务需求 全部粘贴偏长 为了简洁这边就只展示关键代码部分

<script setup lang="ts">
import {
    ref } from 'vue'

interface form {
   
  [key: string]: any
}
const form = ref<form>({
   
  addr: '',
  locationLat: null,
  locationLon: null
})
const formRef = ref()

// #region 地图选址模块 start
//地图选址弹窗ref
const SelectlocationModalRef = ref()
//formitem地址字段点击事件
const addAddress = () => {
   
//弹窗defineExpose 暴露出的open方法 从而打开拟态窗口
  SelectlocationModalRef.value.open()
}

/*
* 拟态窗确定操作后的 emits回调
* val 子组件抛出给父组件的数据
*/
const handelLocationSuccess = (val) => {
   
  form.value.addr = val.addr
  form.value.locationLat = val.lat
  form.value.locationLon = val.lng
}
//#endregion 地图选址模块 end

</script>
<template>
    <el-form
      ref="formRef"
      :model="form">
            <el-form-item label="外访地点">
               <el-button type="primary" @click="addAddress" link>{
   {
   `${
     form.addr ? '更换' : '添加'}地点`}}
               </el-button>
               {
   {
    form.addr }}
            </el-form-item>
    </el-form>
  <SelectlocationModal ref="SelectlocationModalRef" @confirm="handelLocationSuccess" />
</template>

SelectlocationModal.vue组件代码

需要装依赖！！！
包管理器 install 一下 ‘@amap/amap-jsapi-loader’

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import {
    ref, onMounted, onUnmounted } from 'vue'
import {
    assign } from 'lodash-es'
import {
    ElMessage } from 'element-plus'

window._AMapSecurityConfig = {
   
  // 安全密钥
  securityJsCode: '申请的安全密钥'
}
//自定义事件传递数据
const emits = defineEmits(['confirm'])
//弹窗打开状态
const visible: any = ref(false)
//搜索地点数据
const areaList: any = ref([])
//select搜索关键词数据
const areaValue = ref('')
let map: any = null
const loading: any = ref(false)
//抛出的form数据
const checkedForm: any = ref({
   
  addr: '',
  lat: '',
  lng: ''
})


// #region 实例对象 start
let AutoComplete: any = null
let aMap: any = null
let geoCoder: any = null
//#endregion 实例对象 end

const initMap = () => {
   
  AMapLoader.load({
   
    key: '申请的webkey', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap: any) => {
   
      aMap = AMap
      //地图容器id id需确保唯一性 否则 当一个页面存在两个地图插件时 id容器需命名切勿重复
      map = new AMap.Map('container', {
   
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [119.330221107, 26.0471254966] // 初始化地图中心点位 福州市
        // center: [116.397428, 39.90923] // 初始化地图中心点位置置  北京市
      })
      AutoComplete = new AMap.AutoComplete({
   
        city: '全国'
      })
      geoCoder = new AMap.Geocoder({
   
        // city: '010', //城市设为北京，默认：“全国”
        city: '0591', //城市设为福州市
        radius: 1000 //范围，默认：500
      })
     //地图点击事件
      map.on('click', async (e: any) => {
   
        try {
   
        //处理点击数据 
          const result: any = await new Promise((resolve, reject) => {
   
            geoCoder.getAddress(e.lnglat, function (status: string, res: any) {
   
              if (status === 'complete') {
   
                resolve(res)
              } else {
   
                reject(new Error(`获取失败: ${
     status}`))
              }
            })
          })

          checkedForm.value.addr = result.regeocode.formattedAddress
          areaValue.value = result.regeocode.formattedAddress
          addmark(e.lnglat.getLng(), e.lnglat.getLat(), AMap)
        } catch (error) {
   
          console.error('获取失败', error)
        }
      })
    })
    .catch((e) => {
   
      console.log(e)
    })
}
let marker: any = null
const addmark = (lat: any, lng: any, AMap: any) => {
   
  marker && removeMarker()
  marker = new AMap.Marker({
   
    position: new AMap.LngLat(lat, lng),
    title: checkedForm.value.addr,
    zoom: 13
  })
  checkedForm.value.lat = lng
  checkedForm.value.lng = lat
  map.add(m