feat(map):refesh

src/app/map/App.vue

@@ -3,10 +3,14 @@
   <div class="tabbar">
     <div class="nav">
       <el-button-group class="ml-4">
-        <el-button :type="currentType(0) ? 'primary' : 'default'" @click="handleSelect(0)"
+        <el-button
+          :type="currentType(0) ? 'primary' : 'default'"
+          @click="handleSelect(0)"
           >地图</el-button
         >
-        <el-button :type="currentType(1) ? 'primary' : 'default'" @click="handleSelect(1)"
+        <el-button
+          :type="currentType(1) ? 'primary' : 'default'"
+          @click="handleSelect(1)"
           >卡片</el-button
         >
       </el-button-group>
@@ -19,7 +23,11 @@
   <div class="card-container" v-show="currentType(1)">
     <div class="card-list">
       <template v-for="item of list" v-if="list.length > 0">
-        <el-card style="width: 480px" shadow="hover" @click="handCardClick(item.caseId)">
+        <el-card
+          style="width: 480px"
+          shadow="hover"
+          @click="handCardClick(item.caseId)"
+        >
           <img
             class="cover"
             :src="
@@ -81,7 +89,13 @@ const handleSelect = (type: number) => {
   current.value = type;
 };
 
-const getQuery = (caseId: number, share: boolean = false, single: boolean = false) =>
+const markers = ref<any>([]);
+
+const getQuery = (
+  caseId: number,
+  share: boolean = false,
+  single: boolean = false
+) =>
   `${getFuseCodeLink(caseId, true)}${share ? "&share=1" : ""}${
     single ? "&single=1" : ""
   }#show/summary`;
@@ -95,6 +109,7 @@ const request = axios.create({
   },
 });
 const mapEl = ref<HTMLDivElement>();
+let AMap, map;
 
 const getDataQuest = () => {
   return new Promise(async (reslove, reject) => {
@@ -121,10 +136,9 @@ const refresh = async () => {
     text: "Loading",
     background: "rgba(0, 0, 0, 0.7)",
   });
-
-  const data = ((await getDataQuest()) as any) as any[];
-  console.log("data", data);
-  list.value = data as any[];
+  map.remove(markers.value);
+  markers.value = [];
+  initMakers();
   loading.close();
 };
 
@@ -134,18 +148,68 @@ watch(
     refresh();
   },
   {
-    immediate: true,
+    immediate: false,
     deep: true,
   }
 );
+const initMakers = async () => {
+  const data = (await getDataQuest()) as any as any[];
+  console.log("data", data);
+  const positions: any[] = [];
+  list.value = data as any[];
+  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 pos = coord.reverse();
+    positions.push(pos);
+    const marker = new AMap.Marker({
+      icon: icon,
+      position: pos,
+      title: item.title,
+      label: item.title,
+      extData: { url: url, id: item.caseId },
+      // offset: new AMap.Pixel(-26, -54),
+    });
+    markers.value.push(marker);
+    marker.setMap(map);
+
+    marker.on("click", () => {
+      const data = marker.getExtData();
+      window.open(data.url);
+      console.log("click", data);
+    });
+  });
+
+  var polygon = new AMap.Polygon({
+    path: positions,
+    map: map,
+    strokeOpacity: 0, //透明
+    fillOpacity: 0, //透明
+    bubble: true, //事件穿透到地图
+  });
+  var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
+  map.setFitView(); //自适应显示
+};
 const loadMap = async () => {
-  const AMap = await AMapLoader.load({
+  AMap = await AMapLoader.load({
     plugins: ["AMap.PlaceSearch"],
     key: "e661b00bdf2c44cccf71ef6070ef41b8",
     version: "2.0",
   });
 
-  const map = new AMap.Map(mapEl.value, {
+  map = new AMap.Map(mapEl.value, {
     WebGLParams: {
       preserveDrawingBuffer: true,
     },
@@ -164,55 +228,6 @@ const loadMap = async () => {
   );
   console.log("map", map);
 
-  const initMakers = async () => {
-    const data = ((await getDataQuest()) as any) as any[];
-    console.log("data", data);
-    const positions: any[] = [];
-    list.value = data as any[];
-    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 pos = coord.reverse();
-      positions.push(pos);
-      const marker = new AMap.Marker({
-        icon: icon,
-        position: pos,
-        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);
-      });
-    });
-
-    var polygon = new AMap.Polygon({
-      path: positions,
-      map: map,
-      strokeOpacity: 0, //透明
-      fillOpacity: 0, //透明
-      bubble: true, //事件穿透到地图
-    });
-    var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
-    map.setFitView(); //自适应显示
-  };
   initMakers();
 };