Double_X_Attendance_Web/src/pages/ClockIn/components/MapContainer.vue

<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;
let position = ref();

let props = defineProps({
  position: {
    type: Object,
    default: () => ({})
  },
  radius: {
    type: Number,
    default: () => (50)
  },
  address: {
    type: String,
    default: () => ('打卡点')
  }
});

const emit = defineEmits(['update','err']);

onMounted(() => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在定位中，请稍候'
  })

  AMapLoader.load({
    key: "d1f123693def8a412c976184daa4b60e",
    version: "2.0", 
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        viewMode: '2D', //地图模式
        zoom: 18, //初始化地图层级
        center: props.position,
      });

      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.Geolocation", "AMap.CircleEditor", "AMap.Geocoder"], function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,
          timeout: 10000, 
          buttonPosition: 'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,
          useNative: true,
          GeoLocationFirst:true
        });
        map.addControl(geolocation);

        //绘制签到范围
        var circle = new AMap.Circle({
          center: props.position,
          radius: props.radius, //签到范围半径
          borderWeight: 1,
          strokeOpacity: 1,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
        })

        circle.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([circle])
        new AMap.CircleEditor(map, circle)

        const window = `<small>打卡点</small>`;
        const infoWindow = new AMap.InfoWindow({
          content: window,
          anchor: "top-left",
        });
        infoWindow.open(map, props.position);

        //临时定位方式 后续换为精度更高的企业微信定位
        geolocation.getCurrentPosition(function (status, result) {
          if (status == 'complete') {
            position.value = result.position;
            var distance = AMap.GeometryUtil.distance(result.position, props.position).toFixed(2);
            emit('update', distance);
            loading.close();
          } else {
            onError(result);
            loading.close();
          }
        })

        let toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
        let scale = new AMap.Scale();
        map.addControl(scale);
      });

      const marker = new AMap.Marker({
        position: props.position,
        title: "打卡点",
      });
      map.add(marker);
    })
    .catch((e) => {
      console.log(e);
    });

});

//解析定位错误信息
function onError(data) {
  alert(data.message);
}

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

<style scoped>
#container {
  width: 100%;
  height: 450px;
}

@media only screen and (max-width: 768px) {
  #container {
    height: 400px;
  }
}
</style>