实现地图选择城市定位到市中心

src/api/mediaLibrary.js

@@ -129,7 +129,6 @@ export function mediaFiles(query) {
 
 // 地图获取媒体
 export function mediaByMap(query) { 
-  console.log('参数', query)
   return request({
     url: '/media/getMap',
     method: 'get',

src/views/mediaMap/index.vue

@@ -5,8 +5,8 @@
                 <div class="search-where-container">
                     <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
                         <el-form-item label="媒体名称/编号:">
-                            <el-input v-model="queryParams.keyword"  @keydown.enter.prevent="handleQuery" placeholder="请输入媒体名称/编号" clearable
+                            <el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
-                                style="min-width: 30px" />
+                                placeholder="请输入媒体名称/编号" clearable style="min-width: 30px" />
                         </el-form-item>
                         <el-form-item label="媒体类型:">
                             <el-select v-model="queryParams.mediaType" placeholder="请选择" @change="getMediaTypeTwo"
@@ -62,7 +62,8 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                    <el-select v-model="queryParams.townCode" placeholder="请选择" clearable style="min-width: 30px">
+                    <el-select v-model="queryParams.townCode" placeholder="请选择" @change="choseTown" clearable
+                        style="min-width: 30px">
                         <el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
@@ -94,7 +95,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>
@@ -329,6 +330,12 @@ const mapMode = ref('2D')
 // 是否全屏状态
 const isFullscreen = ref(false)
 const placeSearch = ref(null)
+const geocoder = ref(null)
+const geocoderMarker = ref(null)
+const provinceName = ref(null)
+const ciytName = ref(null)
+const countyName = ref(null)
+const townName = ref(null)
 
 // 中心点名称
 const centerPointName = ref(null)
@@ -361,11 +368,6 @@ let minLat = Infinity; // 纬度的最小值（最南边）
 let maxLng = -Infinity; // 经度的最大值（最东边）
 let maxLat = -Infinity; // 纬度的最大值（最北边）
 
-// 悬浮菜单
-const contextMenuVisible = ref(false);
-const menuPosition = ref({
-    top: '0px', left: '0px', zIndex: 999
-});
 // 当前操作媒体
 const curMediaInfo = ref(null)
 
@@ -415,6 +417,10 @@ const resetQuery = () => {
         mapInstance.value.remove(circleHandle.value);
         circleHandle.value = null;
     } 
+    if (geocoderMarker.value) {
+        mapInstance.value.remove(geocoderMarker.value);
+        geocoderMarker.value = null
+    }
 
     // 重新查询
     handleQuery()
@@ -611,7 +617,7 @@ const loadMap = () => {
         };
         AMapLoader.load({
             key: apiKey,
-            plugins: ["AMap.PlaceSearch", "AMap.MouseTool"],
+            plugins: ["AMap.PlaceSearch", "AMap.Geocoder", "AMap.MouseTool"],
             version: '2.0',       // 指定API版本
             AMapUI: {
                 plugins: []
@@ -647,11 +653,6 @@ const loadMap = () => {
             // 监听地图渲染完成事件
             mapInstance.value.on('render', hideAmapLogo);
 
-            // // 关键：监听地图的右键点击事件
-            // mapInstance.value.on('rightclick', handleRightClick);
-            mapInstance.value.on('click', function (e) {
-                hideContextMenu()
-            });
             // 在地图完全加载后执行点数据处理
             // renderMassMarks();
             getMediaList()
@@ -1000,24 +1001,7 @@ const renderMassMarks = () => {
         mapInstance.value.setBounds(bounds);
     }
 }
-const showContextMenu = (pixel) => {
+
-    // 更新菜单位置跟随鼠标光标
-    menuPosition.value = {
-        top: `${pixel.y + 210}px`,
-        left: `${pixel.x + 50}px`,
-        position: 'absolute',
-        padding: '10px',
-        background: '#FFFFFF',
-        lineHeight: '16px',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        boxShadow: '0 0 4px #ccc'
-    };
-    contextMenuVisible.value = true;
-}
-const hideContextMenu = () => {
-    contextMenuVisible.value = false;
-}
 // 隐藏Logo的函数
 const hideAmapLogo = () => {
     const logos = document.querySelectorAll('.amap-logo, .amap-copyright');
@@ -1072,26 +1056,110 @@ const getProvinceList = () => {
 // 获取地级市/区数据
 const getCityList = (value) => {
     sysRegionListByPid({ parentId: value }).then(res => {
-        queryParams.value.cityId = undefined
+        queryParams.value.cityCode = undefined
-        queryParams.value.countyId = undefined
+        queryParams.value.areaCode = undefined
-        queryParams.value.townId = undefined
+        queryParams.value.townCode = undefined
         city.value = res.data
     })
+
+    ciytName.value = undefined
+    countyName.value = undefined
+    townName.value = undefined
+    // 定位到省中心
+    var choseProvince = province.value.filter(item => item.id == value)[0]
+    if (choseProvince) {
+        provinceName.value = choseProvince.name
+        geocoderCityCenter()
+    }
 }
 // 获取区/县数据
 const getCountyList = (value) => {
     sysRegionListByPid({ parentId: value }).then(res => {
-        queryParams.value.countyId = undefined
+        queryParams.value.areaCode = undefined
-        queryParams.value.townId = undefined
+        queryParams.value.townCode = undefined
         county.value = res.data
     })
+    countyName.value = undefined
+    townName.value = undefined
+    var choseCity = city.value.filter(item => item.id == value)[0]
+    if (choseCity) {
+        ciytName.value = choseCity.name
+        geocoderCityCenter()
+    }
 }
 // 获取镇数据
 const getTownList = (value) => {
     sysRegionListByPid({ parentId: value }).then(res => {
-        queryParams.value.townId = undefined
+        queryParams.value.townCode = undefined
         town.value = res.data
     })
+    townName.value = undefined
+    var choseCounty = county.value.filter(item => item.id == value)[0]
+    if (choseCounty) {
+        countyName.value = choseCounty.name
+        geocoderCityCenter()
+    }
+}
+
+// 选择镇
+const choseTown = (value) => {
+    var choseTown = town.value.filter(item => item.id == value)[0]
+    if (choseTown) {
+        townName.value = choseTown.name
+        geocoderCityCenter()
+    }
+}
+
+// 查找指定城市中心点，地图移动到中心点 放大视野
+const geocoderCityCenter = () => {
+    // 构建查询地址
+    var address = provinceName.value;
+    if (ciytName.value) address += ciytName.value;
+    if (countyName.value) address += countyName.value;
+    if (townName.value) address += townName.value;
+
+    // 使用地理编码获取坐标
+    geocoder.value = new AMap.Geocoder({
+        city: ciytName.value || provinceName.value
+    });
+
+    geocoder.value.getLocation(address, function (status, result) {
+        if (status === 'complete' && result.geocodes.length > 0) {
+            var location = result.geocodes[0].location;
+
+            // 根据行政级别设置缩放级别
+            var zoomLevel = getZoomLevel(provinceName.value, ciytName.value, countyName.value, townName.value);
+
+            // 平滑移动到新位置
+            mapInstance.value.setZoomAndCenter(zoomLevel, [location.lng, location.lat], true);
+
+            // 添加标记
+            addMarker([location.lng, location.lat], address);
+
+        }
+    });
+}
+
+// 添加标记
+const addMarker = (position, title) => {
+    // 清除现有标记
+    mapInstance.value.clearMap();
+
+    // 添加新标记
+    geocoderMarker.value = new AMap.Marker({
+        position: position,
+        title: title
+    });
+
+    mapInstance.value.add(geocoderMarker.value);
+}
+
+// 根据行政级别获取缩放级别
+const getZoomLevel = (province, city, county, town) => {
+    if (town) return 15;      // 乡镇级别
+    if (county) return 13;    // 区县级别
+    if (city) return 11;      // 城市级别
+    return 8;                 // 省份级别
 }
 // 选择媒体事件
 const handleChoseMedia = () => {

src/views/outdoorMedia/index.vue

@@ -89,16 +89,20 @@
                 <el-col :span="8">
                     <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
                         <el-form-item label="">
-                            <el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery" placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search"
+                            <el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
-                                style="width: 400px;" />
+                                placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search" style="width: 400px;" />
                         </el-form-item>
                     </el-form>
                 </el-col>
                 <el-col :span="16" style="text-align: right;">
-                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:query']" @click="handleQuery">查询</el-button>
+                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:query']"
-                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:reset']" @click="resetQuery">重置</el-button>
+                        @click="handleQuery">查询</el-button>
-                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:exportPPTS']" @click="handleExportMore">PPT批量导出</el-button>
+                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:reset']"
-                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:clear']" @click="handleClearChoseMedia">清空所选媒体</el-button>
+                        @click="resetQuery">重置</el-button>
+                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:exportPPTS']"
+                        @click="handleExportMore">PPT批量导出</el-button>
+                    <el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:clear']"
+                        @click="handleClearChoseMedia">清空所选媒体</el-button>
                 </el-col>
             </el-row>
             <el-row :gutter="10" class="my_row" style="margin-bottom: 0;">
@@ -216,6 +220,12 @@ const activeTool = ref(null)
 const mapMode = ref('2D')
 // 是否全屏状态
 const isFullscreen = ref(false)
+const geocoder = ref(null)
+const geocoderMarker = ref(null)
+const provinceName = ref(null)
+const ciytName = ref(null)
+const countyName = ref(null)
+const townName = ref(null)
 // 地图数据点
 const points = ref([])
 // 初始化变量用于存储极值
@@ -324,7 +334,17 @@ const getCityList = (value) => {
         queryParams.value.townId = undefined
         city.value = res.data
     })
+    ciytName.value = undefined
+    countyName.value = undefined
+    townName.value = undefined
+    // 定位到省中心
+    var choseProvince = province.value.filter(item => item.id == value)[0]
+    if (choseProvince) {
+        provinceName.value = choseProvince.name
+        geocoderCityCenter()
+    }
     getbusinessAreaList()
+
 }
 // 获取区/县数据
 const getCountyList = (value) => {
@@ -333,6 +353,13 @@ const getCountyList = (value) => {
         queryParams.value.townId = undefined
         county.value = res.data
     })
+    countyName.value = undefined
+    townName.value = undefined
+    var choseCity = city.value.filter(item => item.id == value)[0]
+    if (choseCity) {
+        ciytName.value = choseCity.name
+        geocoderCityCenter()
+    }
     getbusinessAreaList()
 }
 // 获取镇数据
@@ -341,6 +368,12 @@ const getTownList = (value) => {
         queryParams.value.townId = undefined
         town.value = res.data
     })
+    townName.value = undefined
+    var choseCounty = county.value.filter(item => item.id == value)[0]
+    if (choseCounty) {
+        countyName.value = choseCounty.name
+        geocoderCityCenter()
+    }
     getbusinessAreaList()
 }
 // 依据省市县镇查询商圈
@@ -358,7 +391,66 @@ const getbusinessAreaList = (val) => {
             businessAreaList.value = res.data.list
         }
     })
+
+    var choseTown = town.value.filter(item => item.id == val)[0]
+    if (choseTown) {
+        townName.value = choseTown.name
+        geocoderCityCenter()
+    }
 }
+
+// 查找指定城市中心点，地图移动到中心点 放大视野
+const geocoderCityCenter = () => {
+    // 构建查询地址
+    var address = provinceName.value;
+    if (ciytName.value) address += ciytName.value;
+    if (countyName.value) address += countyName.value;
+    if (townName.value) address += townName.value;
+
+    // 使用地理编码获取坐标
+    geocoder.value = new AMap.Geocoder({
+        city: ciytName.value || provinceName.value
+    });
+
+    geocoder.value.getLocation(address, function (status, result) {
+        if (status === 'complete' && result.geocodes.length > 0) {
+            var location = result.geocodes[0].location;
+
+            // 根据行政级别设置缩放级别
+            var zoomLevel = getZoomLevel(provinceName.value, ciytName.value, countyName.value, townName.value);
+
+            // 平滑移动到新位置
+            mapInstance.value.setZoomAndCenter(zoomLevel, [location.lng, location.lat], true);
+
+            // 添加标记
+            addMarker([location.lng, location.lat], address);
+
+        }
+    });
+}
+
+// 添加标记
+const addMarker = (position, title) => {
+    // 清除现有标记
+    mapInstance.value.clearMap();
+
+    // 添加新标记
+    geocoderMarker.value = new AMap.Marker({
+        position: position,
+        title: title
+    });
+
+    mapInstance.value.add(geocoderMarker.value);
+}
+
+// 根据行政级别获取缩放级别
+const getZoomLevel = (province, city, county, town) => {
+    if (town) return 15;      // 乡镇级别
+    if (county) return 13;    // 区县级别
+    if (city) return 11;      // 城市级别
+    return 8;                 // 省份级别
+}
+
 // 折叠展开
 const handleFlod = () => {
     unfoldFlag.value = !unfoldFlag.value
@@ -409,6 +501,10 @@ const resetQuery = () => {
         townCode: undefined,
         businessDistrictId: undefined
     }
+    if (geocoderMarker.value) {
+        mapInstance.value.remove(geocoderMarker.value);
+        geocoderMarker.value = null
+    }
     handleQuery()
 }
 // 选择媒体事件
@@ -441,7 +537,7 @@ const loadMap = () => {
 
         AMapLoader.load({
             key: apiKey,
-            plugins: ["AMap.PlaceSearch", "AMap.MouseTool"],
+            plugins: ["AMap.Geocoder", "AMap.MouseTool"],
             version: '2.0',       // 指定API版本
             AMapUI: {
                 plugins: []