更改地图选择多个点击多个点标记地区选择问题

jsowell-ui/src/components/MapContainer/MapContainer.vue

@@ -11,14 +11,12 @@
                 ></el-input>
                 <el-button style="width: 85px" type="primary" @click="send"
                     >搜索
-        </el-button
-        >
+                </el-button>
             </div>
 
             <div id="container"></div>
         </div>
 
-
         <!--    <div class="img">-->
         <!--      <el-input-->
         <!--        placeholder="请选择图片"-->
@@ -43,10 +41,10 @@ window._AMapSecurityConfig = {
     securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
 };
 export default {
-  props:['stationLat','stationLng'],
+    props: ["stationLat", "stationLng"],
     data() {
         return {
-      dialogImageUrl: '',
+            dialogImageUrl: "",
             dialogVisible: false,
             // headers:{
             //   Authorization:this.$store.state.user.token
@@ -65,7 +63,6 @@ export default {
             placeSearch: "",
             stationId: this.$route.params.id,
             avatar: "",
-
         };
     },
     methods: {
@@ -84,13 +81,23 @@ export default {
         //     this.initMap(this.lat, this.lng);
         //   });
         // },
-
+        handleSearchResultClick(data) {
+            // 在这里处理点击事件
+            // console.log(data); // 你可以在控制台打印点击结果的数据
+            let lat = data.entr_location.lat;
+            let lng = data.entr_location.lng;
+            this.getLngLatService(lat, lng);
+        },
         initMap() {
             // console.log(lat, lng);
             AMapLoader.load({
                 key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填
                 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+                plugins: [
+                    "AMap.AutoComplete",
+                    "AMap.PlaceSearch",
+                    "AMap.Geocoder",
+                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
             })
                 .then((AMap) => {
                     this.map = new AMap.Map("container", {
@@ -105,7 +112,10 @@ export default {
                     this.map.setDefaultCursor("pointer");
                     // 点标记
                     let marker = new AMap.Marker({
-            position: new AMap.LngLat(+this.stationLng, +this.stationLat),
+                        position: new AMap.LngLat(
+                            +this.stationLng,
+                            +this.stationLat
+                        ),
                     });
                     // 将创建的点标记添加到已有的地图实例
                     this.map.add(marker);
@@ -117,6 +127,11 @@ export default {
                     this.placeSearch = new AMap.PlaceSearch({
                         map: this.map,
                     });
+                    // 点击搜索结果的回调函数
+                    this.placeSearch.on("markerClick", (e) => {
+                        // 在此处处理点击事件
+                        this.handleSearchResultClick(e.data);
+                    });
                     // 逆向地理编码 -> 要正向地理编码
                     this.map.on("click", (e) => {
                         let lat = e.lnglat.lat;
@@ -134,7 +149,6 @@ export default {
                 .catch((e) => {
                     console.log(e);
                 });
-
         },
         select(e) {
             this.placeSearch.search(e.poi.name); //关键字查询查询

jsowell-ui/src/views/pile/station/pileList.vue

@@ -18,8 +18,19 @@
                 />
             </el-form-item>
             <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    >搜索</el-button
+                >
+                <el-button
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="resetQuery"
+                    >重置</el-button
+                >
             </el-form-item>
         </el-form>
         <!-- 切换运营商按钮 -->
@@ -70,7 +81,11 @@
                     />
                 </template>
             </el-table-column>
-      <el-table-column label="运营商" align="center" prop="merchantName" />
+            <el-table-column
+                label="运营商"
+                align="center"
+                prop="merchantName"
+            />
             <el-table-column label="充电站" align="center" prop="stationName" />
             <el-table-column
                 label="注册时间"
@@ -88,12 +103,21 @@
         />
 
         <!-- 修改充电桩站点 -->
-    <el-dialog :title="title" :visible.sync="open" width="45%" append-to-body>
+        <el-dialog
+            :title="title"
+            :visible.sync="open"
+            width="45%"
+            append-to-body
+            :before-close="handleClose"
+        >
             <el-form ref="form" :model="updateData" label-width="120px">
                 <el-row>
                     <el-col :span="24">
                         <el-form-item label="已选择的桩">
-              <el-tag v-for="tag in updateData.pileSnList" :key="tag">
+                            <el-tag
+                                v-for="tag in updateData.pileSnList"
+                                :key="tag"
+                            >
                                 {{ tag }}
                             </el-tag>
                         </el-form-item>
@@ -105,7 +129,9 @@
                             <el-select
                                 v-model="updateData.merchantId"
                                 placeholder="请选择运营商"
-                @change="changeSelectMerchant(updateData.merchantId)"
+                                @change="
+                                    changeSelectMerchant(updateData.merchantId)
+                                "
                             >
                                 <el-option
                                     v-for="item in merchantList"
@@ -136,7 +162,9 @@
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="产品型号" prop="modelId">
-              <el-select v-model="updateData.modelId" placeholder="请选择产品型号"
+                            <el-select
+                                v-model="updateData.modelId"
+                                placeholder="请选择产品型号"
                                 v-selectLoadMore="selectLoadMore"
                                 :remote-method="remoteMethod"
                             >
@@ -218,9 +246,9 @@ export default {
             modelTotal: 0,
             loadMoreFlag: true,
             searchModelParam: {
-        name: '',
+                name: "",
                 pageNo: 1,
-        pageSize: 10
+                pageSize: 10,
             },
         };
     },
@@ -230,26 +258,27 @@ export default {
     methods: {
         // 下拉加载更多
         selectLoadMore() {
-      console.log("触底了 ", this.searchModelParam.pageSize)
+            console.log("触底了 ", this.searchModelParam.pageSize);
             if (this.loadMoreFlag === false) {
                 return;
             }
-      this.searchModelParam.pageSize = this.searchModelParam.pageSize + 10;
-      console.log('触底了执行查询', this.searchModelParam);
+            this.searchModelParam.pageSize =
+                this.searchModelParam.pageSize + 10;
+            console.log("触底了执行查询", this.searchModelParam);
             this.getModelList();
         },
 
         // 远程搜索
         remoteMethod(val) {
-      console.log('输入了', val)
-      this.loading = true
-      this.search.name = val
-      this.search.start = 1
-      this.list= []
+            console.log("输入了", val);
+            this.loading = true;
+            this.search.name = val;
+            this.search.start = 1;
+            this.list = [];
             setTimeout(() => {
-        this.loading = false
-        this.getModelList()
-      }, 500)
+                this.loading = false;
+                this.getModelList();
+            }, 500);
         },
 
         // 分页查询
@@ -258,7 +287,8 @@ export default {
                 console.log("分页查询response", response);
                 this.modelTotal = response.total;
                 this.modelList = response.rows;
-        this.loadMoreFlag = this.searchModelParam.pageSize <= this.modelTotal;
+                this.loadMoreFlag =
+                    this.searchModelParam.pageSize <= this.modelTotal;
             });
         },
         /** 搜索按钮操作 */
@@ -269,7 +299,7 @@ export default {
         /** 重置按钮操作 */
         resetQuery() {
             this.queryParams = {
-        pageNum: 1
+                pageNum: 1,
             };
             // this.resetForm("queryForm");
             this.handleQuery();
@@ -322,6 +352,13 @@ export default {
         cancel() {
             this.open = false;
             this.reset();
+            this.stationList = [];
+        },
+        // 点击弹框右上角×
+        handleClose() {
+            this.open = false;
+            this.reset();
+            this.stationList = [];
         },
         reset() {
             this.updateData.merchantId = null;
@@ -353,6 +390,7 @@ export default {
                     });
                     this.open = false;
                     this.getPileList();
+                    this.stationList = [];
                 })
                 .catch((error) => {
                     this.loading = false;