feature_20250827_地图添加搜索当前范围功能

src/views/deviceOutside/rangeStore.vue

@@ -127,19 +127,24 @@
         @ready="handler"
         @reload="reload"
         :key="baiduMapKey"
-        @click="myMapClick"
         ref="myMap">
         <!--        :minClusterSize="minClusterSize"-->
-        <bml-marker-clusterer :averageCenter="false" :styles="styless">
+        <!-- <bml-marker-clusterer :averageCenter="false" :styles="styless">
           <bm-marker
             v-for="(marker, index) of listData"
             :key="new Date().getTime() + index"
             :position="{ lng: marker.lon, lat: marker.lat }"
             @click="infoShow(marker, index)"
             :icon="{ url: mpFn(marker, 2), size: { width: 34, height: 40 } }"></bm-marker>
-        </bml-marker-clusterer>
-        <bm-marker :position="{ lng: lonmy, lat: latmy }"></bm-marker>
-        <!--        +0.00003-->
+        </bml-marker-clusterer> -->
+        <!-- 地图中心坐标 -->
+        <bm-marker
+          :position="{ lng: currentCenter.lng, lat: currentCenter.lat }"
+          :icon="{
+            url: 'http://developer.baidu.com/map/jsdemo/img/location.gif',
+            size: { width: 150, height: 160 },
+          }">
+        </bm-marker>
         <bm-marker
           :position="{ lng: info.lon, lat: info.lat }"
           :top="true"
@@ -163,10 +168,15 @@
             lineHeight: '50px',
           }"
           :offset="{ width: -10, height: -10 }" />
-        <!--        <bm-geolocation @locationSuccess="locationSuccess" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" :offset="{width:5,height:280}"></bm-geolocation>-->
       </baidu-map>
-      <img src="./../../assets/list.png" @click="onClickLeft" class="mapimg" />
+      <img
+        src="./../../assets/sbpm.png"
+        @click="onClickLeft"
+        class="mapimg"
+        style="bottom: 340px" />
       <img src="./../../assets/sbpm.png" @click="onMaps" class="mapimg" style="bottom: 286px" />
+      <!-- 获取当前中心位置数据 -->
+      <img src="./../../assets/sbpm.png" @click="getLocationData" class="mapimg" />
       <div v-if="show" class="mapStoreList">
         <van-icon
           name="close"
@@ -841,6 +851,10 @@ export default {
       heifhgts: '200px',
       mapRange: [], //地图范围
       baiduMapKey: new Date().getTime(),
+      currentCenter: {
+        lng: '',
+        lat: '',
+      }, //地图中心位置
     };
   },
   created() {
@@ -960,6 +974,7 @@ export default {
       // this.mapk.clearOverlays()
       this.getposition();
     },
+    getLocationData() {},
     getStoreTypeList() {
       getStoreTypeListlp({}).then((res) => {
         this.storeTypeLists = res.data;
@@ -1100,22 +1115,20 @@ export default {
       this.geocoder = new TMap.service.Geocoder();
     },
     dragend(e) {
+      // const currentCenter = this.mapk.getCenter();
+      // console.log(`当前中心点纬度: ${currentCenter.lat}, 经度: ${currentCenter.lng}`);
       this.getMapposition(e, '2', this.$route.query.tabVal);
     },
     zoomend(e) {
       this.getMapposition(e, '1', this.$route.query.tabVal);
     },
-    myMapClick(e) {
-      var location = new TMap.LatLng(Number(e.target.re.lat), Number(e.target.re.lng));
-      console.log(e);
-      console.log(location);
-    },
     getMapposition(e, type, listType) {
       var that = this;
       var typeList = -1;
       var input = [e.target.re.lat, e.target.re.lng];
-      var location = new TMap.LatLng(Number(input[0]), Number(input[1]));
-      console.log(location);
+      this.currentCenter = new TMap.LatLng(Number(input[0]), Number(input[1]));
+      console.log(`当前中心点纬度: ${this.currentCenter.lat}, 经度: ${this.currentCenter.lng}`);
+      // console.log(this.currentCenter);
 
       var Zoom = e.target.getZoom();
       if (listType == 1) {
@@ -1318,6 +1331,8 @@ export default {
                   that.lon1 = location.lon;
                   that.latmy = location.lat;
                   that.lonmy = location.lon;
+                  that.currentCenter.lat = that.latmy;
+                  that.currentCenter.lng = that.lonmy;
                   that.mapk.centerAndZoom(new BMap.Point(location.lon, location.lat), 18);
                   that.onSearch();
                   // that.getUserOutPlaList('2');