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-09-03 20:21:01 +08:00
parent 139a23ddfa
commit 07307b7391
4 changed files with 219 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/mediaLibrary/mediaForm.vue
View File

@ -162,14 +162,15 @@
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="地理位置">
<el-row :gutter="30" class="my_form_row">
<el-col :span="12">
<el-input v-model="ruleForm.postCode" placeholder="请输入经度" />
</el-col>
<el-col :span="12">
<el-input v-model="ruleForm.postCode" placeholder="请输入纬度" />
</el-col>
</el-row>
<el-input v-model="latVal" placeholder="请获取经纬度" readonly>
<template #append>
<el-button type="info" @click="handlePickLat">
<el-icon style="top: -4px">
<LocationInformation />
</el-icon>
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
@ -954,16 +955,18 @@
<template #footer>
<el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
</template>
<pickLat ref="pickLatRef" @closePickLat="handleClosePickLat" />
</el-card>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { Close, LocationInformation } from '@element-plus/icons-vue'
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
import multiFileUpload from '../../components/FileUpload/multiFileUpload.vue'
import optionIcon from '@/assets/images/optionIcon.png'
import optionIconHover from '@/assets/images/optionIconHover.png'
import pickLat from './pickLat.vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleShowList']);
@ -971,9 +974,9 @@ const emit = defineEmits(['handleShowList']);
const defaultImageSrc = ref(optionIcon);
const hoverImageSrc = ref(optionIconHover);
const formTitle = ref('新建')
const activePriceType = ref('门禁')
const latVal = ref(null)
const pickLatRef = ref(null)
const loading = ref(false)
const quotationList = ref([
{ year: 2025, currentImageSrc: defaultImageSrc.value }
@ -1014,6 +1017,14 @@ const handlePriceTypeClick = (tab, event) => {
activePriceType.value = tab
}
// 打开拾取经纬度弹窗
const handlePickLat = () => {
pickLatRef.value.loadMap()
}
const handleClosePickLat = (backValue) => {
latVal.value = backValue.lng + ',' + backValue.lat
}
// 业务部门切换
const handleChangeDept = (val) => {
console.log('业务部门', val)
@ -1181,4 +1192,10 @@ defineExpose({
background: rgba(0, 0, 0, 0.7);
}
}
.pickMapContainer {
width: 100%;
height: calc(100vh - 316px);
background: #3f8bff;
}
</style>

171
src/views/mediaLibrary/pickLat.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<!-- 拾取经纬度对话框 -->
<el-dialog title="拾取经纬度" v-model="pickLatOpen" width="1250px" class="my_dialog" align-center
:destroy-on-close="true" :close-on-click-modal="false" :before-close="handleColosePickDialog">
<el-select class="filterSelect" v-model="localeKeyWord" filterable remote reserve-keyword
:remote-method="getLocaleListList" :loading="selectLoading" @change="currentSelect" placeholder="请输入地点"
remote-show-suffix clearable style="margin-bottom: 20px; width: 70%">
<el-option v-for="item in localeList" :key="item.id" :label="item.name" :value="item" class="one-text">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{
item.address
}}</span>
</el-option>
</el-select>
<div v-if="pickLatLableValue" class="pickLatLabel">拾取的经纬度：{{ pickLatLableValue.lng }}, {{ pickLatLableValue.lat }}</div>
<div id="mapContainer" class="pickMapContainer"></div>
<!-- <template #footer>
<div class="dialog-footer">
<el-button class="my-cancel-btn" @click="pickLatOpen = false">取 消</el-button>
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitExportPPT">确 定</el-button>
</div>
</template> -->
</el-dialog>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务
const { proxy } = getCurrentInstance()
const emit = defineEmits(['closePickLat']);
// 拾取的经纬度
const pickLatLableValue = ref(null)
const pickLatOpen = ref(false)
// 拾取经纬度关键字
const selectLoading = ref(false)
const localeKeyWord = ref('')
const localeList = ref([])
// map实例
const mapInstance = ref(null)
const marker = ref(null)
const placeSearch = ref(null)
// 调用API获取地点
const getLocaleListList = (searchValue) => {
selectLoading.value = true
if (searchValue !== "") {
placeSearch.value.search(searchValue, function (status, result) {
// 查询成功时，result即对应匹配的POI信息
console.log(result.poiList, result.poiList.pois, result.poiList.pois?.length)
if (result.poiList.pois?.length) {
localeList.value = result.poiList?.pois
}
selectLoading.value = false
});
}
}
// 地点选择
const currentSelect = (val) => {
console.log('val', val)
localeKeyWord.value = val.name
pickLatLableValue.value = { lng: val.location.lng, lat: val.location.lat }
addmark(val)
}
// 添加标记
const addmark = (val) => {
if (marker.value) mapInstance.value.remove(marker.value);
marker.value = new AMap.Marker({
position: val.location,
title: val.name
});
// 将点添加到地图
mapInstance.value.add(marker.value);
mapInstance.value.setFitView();
}
// 初始化地图
const loadMap = () => {
pickLatOpen.value = true
return new Promise((resolve, reject) => {
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: 'a157b9d8963b598f40023f5469d3e73c'
};
AMapLoader.load({
key: "f5b170e2332903225896a7290b90793a",
plugins: ["AMap.PlaceSearch"],
AMapUI: {
plugins: []
}
}).then(AMap => {
mapInstance.value = new AMap.Map("mapContainer", {
resizeEnable: true,
zoom: 14,
center: [116.397428, 39.90923],
viewMode: "2D",
buildingAnimation: true,
expandZoomRange: true,
});
// 先添加基本控件
mapInstance.value.setZoom(14);
placeSearch.value = new AMap.PlaceSearch({
// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
city: '全国'
})
mapInstance.value.on('click', (e) => {
const clickPoint = { location: e.lnglat }
pickLatLableValue.value = { lng: clickPoint.location.lng, lat: clickPoint.location.lat }
addmark(clickPoint)
})
// 地图加载完成后隐藏Logo
setTimeout(() => {
hideAmapLogo();
}, 1000);
// 监听地图渲染完成事件
mapInstance.value.on('render', hideAmapLogo);
resolve();
}).catch(e => {
console.log(e, "高德地图加载失败");
reject(e);
});
});
}
// 隐藏Logo的函数
const hideAmapLogo = () => {
const logos = document.querySelectorAll('.amap-logo, .amap-copyright');
logos.forEach(logo => {
logo.style.display = 'none';
logo.style.visibility = 'hidden';
logo.style.opacity = '0';
});
}
const handleColosePickDialog = () => {
pickLatOpen.value = false
emit('closePickLat', pickLatLableValue.value)
}
// 暴露方法\属性给父组件
defineExpose({
loadMap
});
</script>
<style lang='scss'>
.pickMapContainer {
width: 100%;
height: calc(100vh - 316px);
background: #3f8bff;
}
.pickLatLabel {
width: 300px;
position: absolute;
right: 30px;
top: 98px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #87898E;
}
</style>

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

@ -34,7 +34,7 @@
</template>
<script setup name="Post">
import { onMounted, ref } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务
import { useBackgroundStore } from '@/store/modules/background'
@ -73,7 +73,7 @@ const resetQuery = () => {
const handleChangeDistance = (itemDistance) => {
queryParams.value.distance = itemDistance.value
activeLableIndex.value = itemDistance.value
distanceLable = itemDistance.label
distanceLable.value = itemDistance.label
}
@ -97,7 +97,6 @@ const loadMap = () => {
key: "f5b170e2332903225896a7290b90793a",
plugins: [],
AMapUI: {
version: "1.1",
plugins: []
}
}).then(AMap => {
@ -367,6 +366,10 @@ const hideAmapLogo = () => {
logo.style.opacity = '0';
});
}
onUnmounted(() => {
mapInstance.value?.destroy()
})
// 初始化
onMounted(() => {
bgStore.setBgImage(otherbg)

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

@ -156,7 +156,7 @@
</div>
</template>
<script setup name="Post">
import { onMounted, ref } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
@ -317,7 +317,6 @@ const loadMap = () => {
key: "f5b170e2332903225896a7290b90793a",
plugins: [],
AMapUI: {
version: "1.1",
plugins: []
}
}).then(AMap => {
@ -587,6 +586,10 @@ const hideAmapLogo = () => {
logo.style.opacity = '0';
});
}
onUnmounted(() => {
mapInstance.value?.destroy()
})
// 初始化
onMounted(() => {
bgStore.setBgImage(otherbg)