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 marker = null;

const emits = defineEmits(["changeMaps"]);

const resetMap = () => {
  try {
    markerList = [];
    map.value?.clearMap();
    m_index = 0;
    emits("changeMaps", markerList);
  } catch (error) {
    console.log(error);
  }
};

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

  AMap = await loader;

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

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

  map.value.setFitView();

  map.value.on("click", (e: any) => {
    // if (m_index >= 1) return;
    if (m_index >= 1) {
      map.value?.remove(marker);
      m_index = 0;
    }
    // 调用函数并传入经纬度
    getDistrictName(e.lnglat.lng, e.lnglat.lat, e);

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

    // 添加标记点击事件监听器
    marker.on("click", (event: any) => {
      // markerList = markerList.filter((item: any) => {
      //   item[0] == marker._position.pos[0] &&
      //     item[0] == marker._position.pos[0];
      // });
      markerList = [];
      emits("changeMaps", markerList);
      map.value.remove(marker);
      m_index--;
      marker = null;
    });
  });
};

const searchMap = (address: any) => {
  // ElMessage.error("搜索功能开发中");
  AMap.plugin("AMap.PlaceSearch", async function () {
    try {
      const placeSearch = new AMap.PlaceSearch({
        pageSize: 5, // 单页显示结果条数
        pageIndex: 1, // 页码
        city: "510500", // 兴趣点城市
        citylimit: true, //是否强制限制在设置的城市内搜索
        map: map.value, // 展现结果的地图实例
        panel: false, // 结果列表将在此容器中进行展示。
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      });
      AMap.Event.addListener(placeSearch, "markerClick", (e: any) => {
        marker ? map.value?.remove(marker) : null;
        getDistrictName(e.event.lnglat.lng, e.event.lnglat.lat, e.event);
      });
      placeSearch.search(address);
    } catch (error) {
      ElMessage.error("没找到");
    }
  });
};

// 获取地区名称
const getDistrictName = (lng: any, lat: any, e: any) => {
  geocoder.getAddress([lng, lat], function (status: any, result: any) {
    if (status === "complete" && result.info === "OK") {
      markerList = [];
      markerList.push({
        lnglat: e.lnglat,
        address: result.regeocode.formattedAddress,
      });
      emits("changeMaps", markerList);
    } else {
      // 解析失败
      ElMessage.error("逆地理编码失败");
    }
  });
};

defineExpose({
  resetMap,
  searchMap,
});

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


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