TaskSystem-admin/src/components/map/MapContainer.vue

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

<script lang="ts" setup name="mapContainer">
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";

const map = shallowRef(null);
let AMap: any = null;
let markerList: Array<any> = [];
let m_index: Number = 0;
let geocoder: any = null;
let autocomplete: any = null;

const emits = defineEmits("changeMaps");

const resetMap = () => {
  markerList = [];
  map.value.clearMap();
  m_index = 0;
  emits("changeMaps", markerList);
};

const initMap = async () => {
  const loader = AMapLoader.load({
    key: "4f8f55618010007147aab96fc72bb408",
    version: "2.0",
  });

  AMap = await loader;

  map.value = new AMap.Map("container", {
    zoom: 13,
  });

  AMap.plugin("AMap.Geocoder", function () {
    geocoder = new AMap.Geocoder({
      radius: 10, // 逆地理编码范围，默认值：1000，单位：米
      extensions: "all", // 返回地址描述结果时是否包含引擎内置的POI，默认值：base，可选值：base、all
    }); // 经纬度数组
  });

  // // 创建 Autocomplete 实例
  // autocomplete = new AMap.Autocomplete({
  //   city: "全国", // 设置默认城市为全国
  // });

  map.value.on("click", (e: any) => {
    // console.log("点击", e.lnglat);
    if (m_index >= 1) return;
    // 调用函数并传入经纬度
    getDistrictName(e.lnglat.lng, e.lnglat.lat, e);

    // 自定义 Marker 的图标
    var customIcon = new AMap.Icon({
      size: new AMap.Size(36, 36), // 图标尺寸
      image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 图标图片
      imageSize: new AMap.Size(26, 26), // 图标图片尺寸
      imageOffset: new AMap.Pixel(0, 0), // 图标图片偏移量
      label: {
        content: "起", // 文字内容
        offset: new AMap.Pixel(-100, -100), // 文字相对于图标的偏移量
      },
    });

    // 创建标记并添加到地图
    let marker = new AMap.Marker({
      position: e.lnglat,
      offset: new AMap.Pixel(-10, -10),
      title: "位置",
      icon: customIcon,
      // content: "起",
    });
    map.value.add(marker);
    m_index++;

    // 添加标记点击事件监听器
    marker.on("click", (event: any) => {
      console.log("删除", event);
      markerList = markerList.filter((item: any) => {
        item[0] == marker._position.pos[0] &&
          item[0] == marker._position.pos[0];
      });
      emits("changeMaps", markerList);
      // 在这里可以进行其他自定义逻辑操作
      map.value.remove(marker);
      m_index--;
      marker = null;
    });
  });
};

const searchMap = (address: any) => {
  console.log(address);
  ElMessage.error("搜索功能开发中");

  // autocomplete.search(address, function (status: any, result: any) {
  //   console.log(status, result);

  //   if (status === "complete" && result.info === "OK") {
  //     // 获取提示结果
  //     var tips = result.tips;

  //     // 更新搜索结果列表或下拉菜单等
  //     // ...
  //   }
  // });
};

// 获取地区名称
const getDistrictName = (lng: any, lat: any, e: any) => {
  geocoder.getAddress([lng, lat], function (status: any, result: any) {
    if (status === "complete" && result.info === "OK") {
      // 解析成功，提取地区名称
      var district = result.regeocode.addressComponent.district;
      // console.log(district, result.regeocode); // 输出地区名字
      markerList.push({
        lnglat: e.lnglat,
        address: result.regeocode.formattedAddress,
      });
      emits("changeMaps", markerList);
    } else {
      // 解析失败
      console.log("逆地理编码失败");
    }
  });
};

defineExpose({
  resetMap,
  searchMap,
});

onMounted(() => {
  initMap();
});
</script>


<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 400px;
  height: 400px;
}
</style>