td_official/src/components/amap/index.vue

<template>
  <div class="map">
    <input type="text" placeholder="请输入地址" v-model="searchValue" />
    <button @click="onSearch">搜索</button>
    <div id="container" :style="{ 'height': mapProps.height }"></div>

    <div id="my-panel" @listElementClick="selectPostion"></div>
    <div class="flex justify-end">
      <el-button type="primary" @click="submit"> 确定 </el-button>
      <el-button @click="emit('setLocation')">取消</el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
const { proxy } = getCurrentInstance();
//props参数
const mapProps = defineProps({
  height: {
    type: String,
    default: '800px'
  }
});
const emit = defineEmits(['setLocation']);
const center = ref([116.397428, 39.90923]);
const map = ref(null);
const placeSearch = ref(null);
const geocoder = ref(null);
const searchValue = ref('');
const lnglat = ref([]);
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: '3f418182f27c907265f69a708c5fa41c'
  };
  AMapLoader.load({
    key: 'ed8d05ca57affee582e2be654bac5baf', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map.value = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 8, // 初始化地图级别
        center: center.value // 初始化地图中心点位置
      });
      //初始化搜索
      placeSearch.value = new AMap.PlaceSearch({
        pageSize: 5, //单页显示结果条数
        // pageIndex: 1, //页码
        // city: '010', //兴趣点城市
        // citylimit: true, //是否强制限制在设置的城市内搜索
        panel: 'my-panel',
        map: map.value, //展现结果的地图实例
        autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
      });
      // 初始化Geocoder
      geocoder.value = new AMap.Geocoder({
        radius: 1000 //范围，默认：500
      });

      // 定位
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：无穷大
        maximumAge: 0, //定位结果缓存0毫秒，默认：0
        convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true, //显示定位按钮，默认：true
        buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      map.value.addControl(geolocation);

      //定位到当前位置
      geolocation.getCurrentPosition((status, result) => {
        console.log(status, result);
      });
      placeSearch.value.on('selectChanged', (e) => {
        let { lng, lat } = e.selected.data.location;
        lnglat.value = [lng, lat];
      });
    })
    .catch((e) => {
      console.log(e);
    });
});
const onSearch = () => {
  //搜索地址
  placeSearch.value.search(searchValue.value, (status, result) => {
    if (result.info !== 'OK') return;
    let { lng, lat } = result.poiList.pois[0].location;
    lnglat.value = [lng, lat];
  });
};

const submit = () => {
  if (!lnglat.value.length) {
    proxy?.$modal.msgWarning('请选择正确地址');
    return;
  }
  geocoder.value.getAddress(lnglat.value, function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result为对应的地理位置详细信息
      const position = {
        lng: lnglat.value[0],
        lat: lnglat.value[1],
        projectSite: result.regeocode.formattedAddress
      };
      emit('setLocation', position);
    }
  });
};

onUnmounted(() => {
  map.value?.destroy();
});
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}
#my-panel {
  position: absolute;
  top: 103px;
  z-index: 1;
  left: 10px;
}
</style>