pc端vue封装高德地图实现定位 PlaceSearch搜索

首先安装 @amap/amap-jsapi-loader
官网教程
mapContainer.vue

<template>
  <div class="container-map" :style="styleObj">
    <!--  @change="changeInput" type="text" -->
    <a-input id='tipinput' v-model:value="inputValue" @change="changeInput"></a-input>
    <div id="container" ref="container" tabindex="0"></div>
    <div id="panel"></div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, getCurrentInstance, ref, inject, watch, toRefs, reactive } from 'vue'
import { useRouter } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader';
import { keyGD, passwordGD } from "@/core/gaodekey.js";
import { message } from "ant-design-vue";
import utils from "@/core/utils.js";

const router = useRouter()
const container = ref(null)
let mapObj = null
let placeSearch = {}
let mapModule = null
let autoComplete = null
const inputValue = ref('')
// 当前位置
const currentPosition = ref({})

watch(
  () => props.value,
  (n) => {
    if (!n) {
      inputValue.value = undefined;
    } else {
      inputValue.value = n;
    }
  },
  { immediate: true }
);
const emits = defineEmits(["getPosition", 'addMarker']);
const props = defineProps({
  replenishmentMapList: {
    type: Array,
    default: () => [],
  },
  styleObj: {
    type: Object,
    default: () => { }
  },
  value: {},
})

const changeInput = (target) => {
  setTimeout(() => {
    emits("update:value", target.target._value);
  }, 500)
}
// 添加点位
const addMarker = (pointArray) => {
  // console.log(pointArray, "pointArray")
  clearMap()
  // 创建不同显示的icon
  pointArray.forEach((marker) => {
    new AMap.Marker({
      map: mapObj,
      position: [marker.lng, marker.lat],
      icon: new mapModule.Icon({ image: marker.icon || '', size: [25, 34], imageSize: [25, 34] }),
      offset: new AMap.Pixel(-13, -30)
    });
  })

  // 移动点位中心点
  mapObj.setFitView();
}
// 清除地图所有覆盖物
const clearMap = () => {
  mapObj.clearMap();
}
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: keyGD, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geolocation"],
  })
    .then((AMap) => {
      console.log(AMap, 'AMap')
      // 保存AMap实例
      mapModule = AMap
      const map = new AMap.Map('container', {
        // 设置地图容器id
        // viewMode: '3D', // 默认2d地图模式
        zoom: 12, // 初始化地图级别
        zooms: [5, 30],
        // 可以设置初始化当前位置
        // center: [116.397428, 39.90923],

        resizeEnable: true
      })
      mapObj = map
      let geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：5s
        position: 'RB',    //定位按钮的停靠位置
        offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
      });
      mapObj.addControl(geolocation)
      geolocation.getCurrentPosition((status, result) => {
        if (status == 'complete') {
          console.log(result, 'result你好')
          const { lng, lat } = result.position
          currentPosition.value = { lng, lat }
          emits('getPosition', [lng, lat])
          addMarker([{ lng, lat }])
        } else {
          message.error('定位失败')
        }
      })
      // 搜索功能
      toSearch()

    })
    .catch((e) => {
      console.log(e)
    })
}
const select = (e) => {
  const { poi } = e
  debugger
  const poiName = e.poi.name
  placeSearch.setCity(e.poi.adcode)
  // 获取当前的坐标 115.644865,40.223472
  // lng lat 
  const { lng, lat } = e.poi.location
  autoComplete.search(poiName, function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      console.log(result, 'result')
      addMarker([{ lng, lat }])
      // 获取搜索到的点位
      emits('getPosition', [lng, lat])
      emits('getPositionInfo', poi)
    }
  }) // 关键字查询查询
}
const toSearch = () => {
  const autoOptions = {
    // input 为绑定输入提示功能的input的DOM ID,注意这个id要个搜索输入框的id一致
    input: 'tipinput'
  }
  autoComplete = new AMap.AutoComplete(autoOptions)
  placeSearch = new AMap.PlaceSearch(
    {
      map: mapObj, //展现结果的地图实例
    }
  )
  // console.log(placeSearch, 'placeSearch')
  autoComplete.on('select', select)// 注册监听，当选中某条记录时会触发
}


onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: passwordGD // 申请key对应的秘钥 -> 注意了，如果不搭配密钥使用，搜索将没有结果
  }
  initMap() // 初始化地图
})
onUnmounted(() => {
  map?.destroy();
})
// watch(propData,(newVal,oldVal)=>{})
defineExpose({
  addMarker,
})
</script>

<style scoped>
.container-map {
  padding: 0px;
  margin: 0px;
  width: 50%;
  height: 500px;

  #container {
    width: 100%;
    height: 100%;
  }
}
</style>