优化媒体地图显示

src/views/mediaMap/index.vue

@@ -147,7 +147,7 @@ const placeSearch = ref(null)
 
 // 热区圆实例
 const circle = ref(null);
-const circleRadius = ref(2000); // 实际半径（米） 
+const circleRadius = ref(500); // 实际半径（米） 
 const circleHandle = ref(null);  // 拖拽手柄 
 
 // 选择地点展示框
@@ -190,7 +190,7 @@ const resetQuery = () => {
     distanceLable.value = '请选择'
     // 选择的距离值
     activeLableIndex.value = null
-    circleRadius.value = 2000; // 实际半径（米） 
+    circleRadius.value = 500; // 实际半径（米） 
     selectConfig.value = null
 
     // 清除现有的圆形和标记
@@ -246,9 +246,9 @@ const currentSelect = (val) => {
     queryParams.value.distance = circleRadius.value
 
     // 距离显示文本
-    distanceLable.value = circleRadius.value == 2000 ? '2000米' : circleRadius.value + '米'
+    distanceLable.value = circleRadius.value == 500 ? '500米' : circleRadius.value + '米'
     // 选择的距离值
-    activeLableIndex.value = circleRadius.value == 2000 ? 2000 : circleRadius.value
+    activeLableIndex.value = circleRadius.value == 500 ? 500 : circleRadius.value
 
     // 清除现有的圆形和标记
     if (circle.value) {
@@ -622,13 +622,28 @@ const renderMassMarks = () => {
             size: new AMap.Size(18, 18)
         },
     ];
+
+    // 初始化变量用于存储极值
+    let minLng = Infinity; // 经度的最小值（最西边）
+    let minLat = Infinity; // 纬度的最小值（最南边）
+    let maxLng = -Infinity; // 经度的最大值（最东边）
+    let maxLat = -Infinity; // 纬度的最大值（最北边）
+
     // 调用接口，获取数据点
     points.value = []
     mediaByMap(queryParams.value).then(res => {
         if (res.code == 200) {
             res.data.forEach(itemPoint => {
                 if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 0 })
-                if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 1 })
+                else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 1 })
+
+                // 同时更新极值
+                const lng = itemPoint.x;
+                const lat = itemPoint.y;
+                if (lng < minLng) minLng = lng;
+                if (lat < minLat) minLat = lat;
+                if (lng > maxLng) maxLng = lng;
+                if (lat > maxLat) maxLat = lat;
             });
         }
     }).then(res => {
@@ -647,6 +662,16 @@ const renderMassMarks = () => {
         massMarks.value.on('click', function (e) {
             handleViewMedia(e.data.mediaId)
         });
+
+        // ==================================================
+        // 新增：计算边界并设置地图视野
+        // ==================================================
+        const southWest = new AMap.LngLat(minLng, minLat); // 西南角
+        const northEast = new AMap.LngLat(maxLng, maxLat); // 东北角
+        const bounds = new AMap.Bounds(southWest, northEast);
+
+        // 设置地图显示范围，会自动适配最佳视图
+        mapInstance.value.setBounds(bounds);
     })
 }
 // 隐藏Logo的函数

src/views/outdoorMedia/index.vue

@@ -371,6 +371,7 @@ const getOutMediaPageList = () => {
 
         // 在地图完全加载后执行点数据处理
         renderMassMarks();
+
     })
 }
 /** 搜索按钮操作 */
@@ -631,12 +632,30 @@ const renderMassMarks = () => {
             size: new AMap.Size(18, 18)
         },
     ];
+
+    // 初始化变量用于存储极值
+    let minLng = Infinity; // 经度的最小值（最西边）
+    let minLat = Infinity; // 纬度的最小值（最南边）
+    let maxLng = -Infinity; // 经度的最大值（最东边）
+    let maxLat = -Infinity; // 纬度的最大值（最北边）
+
     // 调用接口，获取数据点
     points.value = []
     outdoorMediaList.value.forEach(itemPoint => {
         if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 })
-        if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 })
+        else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 })
+
+        // 同时更新极值
+        const lng = itemPoint.mapX;
+        const lat = itemPoint.mapY;
+        if (lng < minLng) minLng = lng;
+        if (lat < minLat) minLat = lat;
+        if (lng > maxLng) maxLng = lng;
+        if (lat > maxLat) maxLat = lat;
     });
+
+    // 如果有点存在，则创建 MassMarks 实例
+    if (points.value.length > 0) {
         // 创建MassMarks对象
         massMarks.value = new AMap.MassMarks(points.value, {
             opacity: 1,
@@ -652,6 +671,18 @@ const renderMassMarks = () => {
         massMarks.value.on('click', function (e) {
             handleViewMedia(e.data.mediaId)
         });
+
+        // ==================================================
+        // 新增：计算边界并设置地图视野
+        // ==================================================
+        const southWest = new AMap.LngLat(minLng, minLat); // 西南角
+        const northEast = new AMap.LngLat(maxLng, maxLat); // 东北角
+        const bounds = new AMap.Bounds(southWest, northEast);
+
+        // 设置地图显示范围，会自动适配最佳视图
+        mapInstance.value.setBounds(bounds);
+    }
+
 }
 // 隐藏Logo的函数
 const hideAmapLogo = () => {