wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangchengming 2025-10-15 13:54:22 +08:00
parent d1af993016
commit 962a6682b6
3 changed files with 212 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/mediaLibrary.js
View File

@ -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',

146
src/views/mediaMap/index.vue
View File

@ -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
style="min-width: 30px" />
<el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
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)
@ -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 = () => {

112
src/views/outdoorMedia/index.vue
View File

@ -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"
style="width: 400px;" />
<el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
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:reset']" @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-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:query']"
@click="handleQuery">查询</el-button>
<el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:reset']"
@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
@ -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: []