优化媒体地图显示

src/views/mediaMap/index.vue

@@ -13,7 +13,7 @@
                                     <div style="height: 24px; line-height: 24px;font-size: 16px;">{{ item.name }}</div>
                                     <div style="color: #8492a6; font-size: 12px;height: 18px; line-height: 18px;">{{
                                         item.address
-                                        }}</div>
+                                    }}</div>
                                 </el-option>
                             </el-select>
                         </el-form-item>
@@ -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
 
     // 清除现有的圆形和标记
@@ -216,7 +216,7 @@ const handleViewMedia = (_mediaId) => {
     mediaDetail({ mediaId: _mediaId }).then(res => {
         detailForm.value = res.data
         if (detailForm.value.mediaFile && detailForm.value.mediaFile.length > 0) {
-            fileList.value = detailForm.value.mediaFile.filter(item => item.fileType == 6) 
+            fileList.value = detailForm.value.mediaFile.filter(item => item.fileType == 6)
         }
         open.value = true
     })
@@ -237,7 +237,7 @@ const getLocaleListList = (searchValue) => {
     }
 }
 // 中心点选择
-const currentSelect = (val) => { 
+const currentSelect = (val) => {
     selectConfig.value = val
     centerPointName.value = val.name
     // queryParams.value.keyword = val.name
@@ -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) {
@@ -312,7 +312,7 @@ const createCircleHandle = () => {
     const handlePosition = new AMap.LngLat(
         center.lng + radius / (111320 * Math.cos(center.lat * Math.PI / 180)),
         center.lat
-    ); 
+    );
     // 创建手柄标记
     circleHandle.value = new AMap.Marker({
         position: [handlePosition.lng, handlePosition.lat],
@@ -622,16 +622,31 @@ 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 => { 
+    }).then(res => {
         // 创建MassMarks对象
         massMarks.value = new AMap.MassMarks(points.value, {
             opacity: 1,
@@ -644,9 +659,19 @@ const renderMassMarks = () => {
         massMarks.value.setMap(mapInstance.value);
 
         // 添加点击事件
-        massMarks.value.on('click', function (e) { 
+        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,27 +632,57 @@ 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 => { 
+    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 })
-    }); 
+
-    // 创建MassMarks对象
+        // 同时更新极值
-    massMarks.value = new AMap.MassMarks(points.value, {
+        const lng = itemPoint.mapX;
-        opacity: 1,
+        const lat = itemPoint.mapY;
-        zIndex: 111,
+        if (lng < minLng) minLng = lng;
-        cursor: 'pointer',
+        if (lat < minLat) minLat = lat;
-        style: styles
+        if (lng > maxLng) maxLng = lng;
+        if (lat > maxLat) maxLat = lat;
     });
 
-    // 将海量点添加到地图
+    // 如果有点存在，则创建 MassMarks 实例
-    massMarks.value.setMap(mapInstance.value);
+    if (points.value.length > 0) {
+        // 创建MassMarks对象
+        massMarks.value = new AMap.MassMarks(points.value, {
+            opacity: 1,
+            zIndex: 111,
+            cursor: 'pointer',
+            style: styles
+        });
+
+        // 将海量点添加到地图
+        massMarks.value.setMap(mapInstance.value);
+
+        // 添加点击事件
+        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);
+    }
 
-    // 添加点击事件
-    massMarks.value.on('click', function (e) { 
-        handleViewMedia(e.data.mediaId)
-    });
 }
 // 隐藏Logo的函数
 const hideAmapLogo = () => {