public-fuse/src/app/map/App.vue

<template>
  <!-- <div>地图页面</div> -->
  <div ref="mapEl" class="map-container"></div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref } from "vue";
import axios from 'axios';
import { getFuseCodeLink } from "../../view/case/help";

const getQuery = (
  caseId: number,
  share: boolean = false,
  single: boolean = false
) =>
  `${getFuseCodeLink(caseId, true)}${share ? "&share=1" : ""}${single ? "&single=1" : ""
  }#show/summary`;

const request = axios.create({
  baseURL: '',
  timeout: 1000,
  headers: {
    share: 1,
    'Content-Type': 'application/json'
  },
});
const mapEl = ref<HTMLDivElement>();

const getDataQuest = () => {
  return new Promise(async (reslove, reject) => {

    const res = await request.post('https://xj-mix3d.4dkankan.com/fusion-xj/web/fireProject/queryProject', {
      pageNum: 1,
      pageSize: 10000
    })
    console.log('res.data', res)
    if (res.status === 200 && res.data.code === 0) {
      reslove(res.data.data.list)
    } else {
      reslove([])
    }
  })



}

const loadMap = async () => {

  const AMap = await AMapLoader.load({
    plugins: ["AMap.PlaceSearch"],
    key: "e661b00bdf2c44cccf71ef6070ef41b8",
    version: "2.0",
  });


  const map = new AMap.Map(mapEl.value, {
    WebGLParams: {
      preserveDrawingBuffer: true,
    },
    resizeEnable: true,
  });

  //添加插件
  AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", 'AMap.MapType'], function () {
    //异步同时加载多个插件
    // map.addControl(new AMap.HawkEye()); //显示缩略图
    map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
    map.addControl(new AMap.MapType()); //显示当前地图中心的比例尺
  });
  console.log('map', map,)

  const initMakers = async () => {
    const data = await getDataQuest() as any as any[];
    console.log('data', data)
    Array.from(data).forEach((item: any) => {
      // console.log(item)
      const latlng = item.latlng
      const coord = latlng.split(',')


      console.log('coord', coord, item.caseId)
      const url = getQuery(item.caseId, true)
      console.log('url', url)
      const icon = new AMap.Icon({
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        size: new AMap.Size(22, 28),  //图标所处区域大小
        imageSize: new AMap.Size(22, 28) //图标大小
      });

      const marker = new AMap.Marker({
        icon: icon,
        position: coord.reverse(),
        title: item.title,
        label: item.title,
        extData: { url: url, id: item.caseId }
        // offset: new AMap.Pixel(-26, -54),
      });

      marker.setMap(map);
      marker.on('click', () => {
        const data = marker.getExtData()
        window.open(data.url)
        console.log('click', data)
      })
    })
  }
  initMakers();

};

onMounted(loadMap);
</script>
<style>
body {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>