From 962a6682b672e6bd4410df5902807958e34c3c7f Mon Sep 17 00:00:00 2001 From: wangchengming <15110151257@163.com> Date: Wed, 15 Oct 2025 13:54:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=9C=B0=E5=9B=BE=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=9F=8E=E5=B8=82=E5=AE=9A=E4=BD=8D=E5=88=B0=E5=B8=82?= =?UTF-8?q?=E4=B8=AD=E5=BF=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/mediaLibrary.js | 3 +- src/views/mediaMap/index.vue | 146 ++++++++++++++++++++++--------- src/views/outdoorMedia/index.vue | 112 ++++++++++++++++++++++-- 3 files changed, 212 insertions(+), 49 deletions(-) diff --git a/src/api/mediaLibrary.js b/src/api/mediaLibrary.js index 40f9307..a9116e8 100644 --- a/src/api/mediaLibrary.js +++ b/src/api/mediaLibrary.js @@ -128,8 +128,7 @@ export function mediaFiles(query) { } // 地图获取媒体 -export function mediaByMap(query) { - console.log('参数', query) +export function mediaByMap(query) { return request({ url: '/media/getMap', method: 'get', diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue index ac0e547..964039d 100644 --- a/src/views/mediaMap/index.vue +++ b/src/views/mediaMap/index.vue @@ -5,8 +5,8 @@
- + - + @@ -94,7 +95,7 @@
{{ item.name }}
{{ item.address - }}
+ }}
@@ -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) @@ -414,6 +416,10 @@ const resetQuery = () => { if (circleHandle.value) { mapInstance.value.remove(circleHandle.value); circleHandle.value = null; + } + if (geocoderMarker.value) { + mapInstance.value.remove(geocoderMarker.value); + geocoderMarker.value = null } // 重新查询 @@ -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.countyId = undefined - queryParams.value.townId = undefined + queryParams.value.cityCode = undefined + queryParams.value.areaCode = 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.townId = undefined + queryParams.value.areaCode = 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 = () => { diff --git a/src/views/outdoorMedia/index.vue b/src/views/outdoorMedia/index.vue index fd23015..e372e7e 100644 --- a/src/views/outdoorMedia/index.vue +++ b/src/views/outdoorMedia/index.vue @@ -89,16 +89,20 @@ - + - 查询 - 重置 - PPT批量导出 - 清空所选媒体 + 查询 + 重置 + PPT批量导出 + 清空所选媒体 @@ -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 @@ -380,7 +472,7 @@ const getOutMediaPageList = () => { if (lat < minLat) minLat = lat; if (lng > maxLng) maxLng = lng; if (lat > maxLat) maxLat = lat; - } + } }); outdoorMediaList.value = res.data.rows total.value = res.data.total @@ -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: []