fix: 1

src/app/fire/view/dispatch/editFire.vue

@@ -27,12 +27,16 @@
         maxlength="50"
         placeholder="请输入详细地址"
       /> -->
-      <el-input v-model="keyword" placeholder="输入名称搜索" clearable @change="search">
+      <el-input
+        v-model="bindFire.projectAddress"
+        placeholder="输入名称搜索"
+        clearable
+        disabled
+      >
         <template #append>
-          <el-button :icon="Search" @click="search" />
+          <el-button :icon="Search" @click="searchAMapAddress" />
         </template>
       </el-input>
-      <div class="search-result" v-show="!info" ref="resultEl"></div>
     </el-form-item>
     <el-form-item label="勘验地址">
       <el-input v-model="bindFire.field1" maxlength="50" placeholder="请输入勘验地址" />
@@ -186,6 +190,7 @@ import { QuiskExpose } from "@/helper/mount";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { user } from "@/store/user";
 import { Search } from "@element-plus/icons-vue";
+import { selectMapImage } from "@/view/case/quisk";
 
 const props = defineProps<{ fire?: Fire }>();
 
@@ -216,60 +221,11 @@ if (bindFire.value.field8) {
 }
 
 const f8 = ref(f8s);
-const keyword = ref(bindFire.value.projectAddress || "");
-const resultEl = ref<HTMLDivElement>();
-const searchAMap = ref<any>();
-type MapInfo = { lat: number; lng: number };
-const info = ref<MapInfo>();
-const mapEl = ref<HTMLDivElement>();
-
-watchEffect(async (onCleanup) => {
-  if (!mapEl.value || !resultEl.value) {
-    return;
-  }
-  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,
-  });
-  const placeSearch = new AMap.PlaceSearch({
-    pageSize: 5,
-    pageIndex: 1,
-    map: map,
-    panel: resultEl.value,
-    autoFitView: true,
-  });
-  placeSearch.on("listElementClick", (e) => {
-    bindFire.value.projectAddress =
-      e.data.pname + e.data.cityname + e.data.adname + e.data.address;
-    keyword.value = bindFire.value.projectAddress;
-    console.log(e.data);
-    bindFire.value.latAndLong = `${e.data.location.lat},${e.data.location.lng}`;
-    bindFire.value.latlng = `${e.data.location.lat},${e.data.location.lng}`;
-    info.value = {
-      lat: e.data.lat,
-      lng: e.data.lng,
-    };
-  });
-
-  searchAMap.value = placeSearch;
-  console.log(placeSearch.listElementClick);
-  onCleanup(() => {
-    searchAMap.value = null;
-    map.destroy();
-  });
-});
-
-const search = () => {
-  info.value = undefined;
-  searchAMap.value.search(keyword.value);
+const searchAMapAddress = async () => {
+  const data = await selectMapImage({});
+  if (!data?.search) return;
+  bindFire.value.projectAddress = data.search.text;
+  bindFire.value.latlng = bindFire.value.latAndLong = `${data.search.lat},${data.search.lng}`;
 };
 
 defineExpose<QuiskExpose>({

src/view/case/draw/selectMapImage.vue

@@ -22,11 +22,12 @@ import { ref, watchEffect } from "vue";
 import { QuiskExpose } from "@/helper/mount";
 import { debounce } from "@/util";
 
-export type MapImage = { blob: Blob | null };
-type MapInfo = { lat: number; lng: number; zoom: number };
+export type MapImage = { blob: Blob | null; search: MapInfo | null };
+type MapInfo = { lat: number; lng: number; zoom: number; text: string };
 
 const keyword = ref("");
 const info = ref<MapInfo>();
+const searchInfo = ref<MapInfo>();
 
 const mapEl = ref<HTMLDivElement>();
 const resultEl = ref<HTMLDivElement>();
@@ -37,7 +38,7 @@ watchEffect(async (onCleanup) => {
     return;
   }
   const AMap = await AMapLoader.load({
-    plugins: ["AMap.PlaceSearch"],
+    plugins: ["AMap.PlaceSearch", "AMap.Event"],
     key: "e661b00bdf2c44cccf71ef6070ef41b8",
     version: "2.0",
   });
@@ -50,15 +51,40 @@ watchEffect(async (onCleanup) => {
   });
   const placeSearch = new AMap.PlaceSearch({
     pageSize: 5,
+    showCover: false,
     pageIndex: 1,
     map: map,
     panel: resultEl.value,
     autoFitView: true,
   });
+  const setSearch = (data) => {
+    searchInfo.value = {
+      text: data.pname + data.cityname + data.adname + data.address,
+      lat: data.location.lat,
+      lng: data.location.lng,
+      zoom: 0,
+    };
+  };
+
+  placeSearch.on("listElementClick", (e) => {
+    setSearch(e.data);
+  });
+  placeSearch.on("complete", function (result) {
+    setTimeout(() => {
+      const markers = map.getAllOverlays("marker");
+      for (const marker of markers) {
+        marker.on("click", () => {
+          setSearch(marker._data);
+        });
+      }
+    }, 500);
+  });
+
   const getMapInfo = (): MapInfo => {
     var zoom = map.getZoom(); //获取当前地图级别
     var center = map.getCenter();
     return {
+      text: "",
       zoom,
       lat: center.lat,
       lng: center.lng,
@@ -87,9 +113,9 @@ defineExpose<QuiskExpose>({
     return new Promise<MapImage>((resolve) => {
       if (mapEl.value) {
         const canvas = mapEl.value.querySelector("canvas") as HTMLCanvasElement;
-        canvas.toBlob((blob) => resolve({ blob }));
+        canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! }));
       } else {
-        resolve({ blob: null });
+        resolve({ blob: null, search: null });
       }
     });
   },