feat:自提点
This commit is contained in:
dzc committed
1 parent
44c38d71a8
commit
36ccf25974
4 files changed
+407
-198
No files matched your search
+118
-190
@@ -2,67 +2,39 @@
|
||||
<el-dialog v-model="state.visibleMapDialog" title="地图位置选择器" width="80%" :before-close="handleClose"
|
||||
class="map-picker-dialog">
|
||||
<div class="map-picker-container">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<el-input v-model="state.searchKeyword" placeholder="请输入地址或POI名称进行搜索" class="search-input"
|
||||
@keyup.enter="handleSearch">
|
||||
<template #append>
|
||||
<el-button @click="handleSearch" :loading="state.searching">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<!-- 地图容器 -->
|
||||
<div class="map-container">
|
||||
<tmap-map ref="mapRef" style="width: 100%; height: 500px;" mapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA"
|
||||
:center="map.center" :zoom="map.zoom" :doubleClickZoom="map.doubleClickZoom"
|
||||
@click="handleMapClick">
|
||||
<tmap-map ref="mapRef" style="width: 100%; height: 500px; cursor: pointer;"
|
||||
mapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA" :center="map.center" :zoom="map.zoom"
|
||||
:doubleClickZoom="map.doubleClickZoom" :events="{
|
||||
click: handleMapClick,
|
||||
mousemove: handleMapMouseMove,
|
||||
mouseleave: handleMapMouseLeave,
|
||||
}">
|
||||
<!-- 标记点 -->
|
||||
<tmap-marker v-if="state.selectedLocation" :position="state.selectedLocation" :draggable="true"
|
||||
@dragend="handleMarkerDragEnd" />
|
||||
@dragend="handleMarkerDragEnd">
|
||||
<template #default>
|
||||
<div class="custom-marker">
|
||||
<div class="marker-icon">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
手动发送发送到发送方
|
||||
</div>
|
||||
<div class="marker-shadow"></div>
|
||||
</div>
|
||||
</template>
|
||||
</tmap-marker>
|
||||
</tmap-map>
|
||||
|
||||
<!-- 地图中心十字标 -->
|
||||
<div class="map-crosshair">
|
||||
<div class="crosshair-horizontal"></div>
|
||||
<div class="crosshair-vertical"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息面板 -->
|
||||
<div class="info-panel">
|
||||
<div class="location-info">
|
||||
<div class="info-row">
|
||||
<span class="label">选中地址：</span>
|
||||
<span class="value">{{ state.selectedAddress || '请在地图上点击选择位置' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">经纬度：</span>
|
||||
<span class="value">
|
||||
{{ state.selectedLocation ? `${state.selectedLocation.lng}, ${state.selectedLocation.lat}` :
|
||||
'未选择' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果列表 -->
|
||||
<div v-if="state.searchResults.length > 0" class="search-results">
|
||||
<div class="results-title">搜索结果</div>
|
||||
<div class="results-list">
|
||||
<div v-for="(item, index) in state.searchResults" :key="index" class="result-item"
|
||||
@click="selectSearchResult(item)">
|
||||
<div class="result-title">{{ item.title }}</div>
|
||||
<div class="result-address">{{ item.address }}</div>
|
||||
</div>
|
||||
<!-- 鼠标悬停坐标显示 -->
|
||||
<div v-if="state.showHoverCoords && state.hoverLocation" class="hover-coords">
|
||||
<div class="coords-tooltip">
|
||||
<span>经度: {{ state.hoverLocation.lng.toFixed(6) }}</span>
|
||||
<span>纬度: {{ state.hoverLocation.lat.toFixed(6) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
@@ -75,28 +47,24 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="map-picker-dialog">
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue'
|
||||
import { reactive, ref, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { TencentMapAPI } from '../../utils/jsonp'
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['confirm', 'close'])
|
||||
|
||||
// 响应式状态
|
||||
const state = reactive<any>({
|
||||
const state = reactive({
|
||||
visibleMapDialog: false,
|
||||
searchKeyword: '',
|
||||
searching: false,
|
||||
selectedLocation: null,
|
||||
selectedAddress: '',
|
||||
searchResults: []
|
||||
selectedLocation: null as any,
|
||||
hoverLocation: null as any, // 鼠标悬停位置
|
||||
showHoverCoords: false // 是否显示悬停坐标
|
||||
})
|
||||
|
||||
// 地图配置
|
||||
const map = reactive<any>({
|
||||
// 默认县府
|
||||
center: { lat: 29.453297, lng: 119.89259 },
|
||||
// 默认中心点（可以根据需要调整）
|
||||
center: { lat: 39.908823, lng: 116.397470 }, // 北京天安门
|
||||
zoom: 15,
|
||||
doubleClickZoom: true,
|
||||
})
|
||||
@@ -104,16 +72,6 @@ const map = reactive<any>({
|
||||
// 地图引用
|
||||
const mapRef = ref()
|
||||
|
||||
// 腾讯地图API密钥 <mcreference link="https://lbs.qq.com/getPoint/#J" index="0">0</mcreference>
|
||||
const TENCENT_MAP_KEY = "4INBZ-UIUCZ-ILHXD-7P2GM-6C2LZ-S7BNI"
|
||||
|
||||
// 创建腾讯地图API实例 (启用调试模式)
|
||||
const mapAPI = new TencentMapAPI(TENCENT_MAP_KEY, true)
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化地图相关功能
|
||||
})
|
||||
|
||||
// 打开对话框
|
||||
const open = (initialLocation?: any) => {
|
||||
state.visibleMapDialog = true
|
||||
@@ -123,13 +81,11 @@ const open = (initialLocation?: any) => {
|
||||
if (initialLocation) {
|
||||
state.selectedLocation = { ...initialLocation }
|
||||
map.center = initialLocation
|
||||
state.selectedAddress = '正在获取地址...'
|
||||
reverseGeocode(initialLocation)
|
||||
}
|
||||
|
||||
// 等待DOM更新后初始化地图
|
||||
nextTick(() => {
|
||||
initMap(initialLocation)
|
||||
console.log('地图对话框已打开')
|
||||
})
|
||||
}
|
||||
|
||||
@@ -142,62 +98,36 @@ const handleClose = () => {
|
||||
|
||||
// 重置状态
|
||||
const resetState = () => {
|
||||
state.searchKeyword = ''
|
||||
state.searching = false
|
||||
state.selectedLocation = null
|
||||
state.selectedAddress = ''
|
||||
state.searchResults = []
|
||||
state.hoverLocation = null
|
||||
state.showHoverCoords = false
|
||||
}
|
||||
|
||||
// 地图鼠标移动事件
|
||||
const handleMapMouseMove = (event: any) => {
|
||||
const { lat, lng } = event.latLng
|
||||
state.hoverLocation = { lat, lng }
|
||||
state.showHoverCoords = true
|
||||
}
|
||||
|
||||
// 地图鼠标离开事件
|
||||
const handleMapMouseLeave = () => {
|
||||
state.showHoverCoords = false
|
||||
state.hoverLocation = null
|
||||
}
|
||||
|
||||
// 地图点击事件
|
||||
const handleMapClick = (event: any) => {
|
||||
const { lat, lng } = event.latLng
|
||||
state.selectedLocation = { lat, lng }
|
||||
|
||||
// 逆地址解析
|
||||
reverseGeocode({ lat, lng })
|
||||
console.log('选中位置:', { lat, lng })
|
||||
}
|
||||
|
||||
// 标记拖拽结束事件
|
||||
const handleMarkerDragEnd = (event: any) => {
|
||||
const { lat, lng } = event.latLng
|
||||
state.selectedLocation = { lat, lng }
|
||||
|
||||
// 逆地址解析
|
||||
reverseGeocode({ lat, lng })
|
||||
}
|
||||
|
||||
// 搜索地址
|
||||
const handleSearch = async () => {
|
||||
if (!state.searchKeyword.trim()) {
|
||||
ElMessage.warning('请输入搜索关键词')
|
||||
return
|
||||
}
|
||||
|
||||
state.searching = true
|
||||
try {
|
||||
const results = await searchLocation(state.searchKeyword)
|
||||
state.searchResults = results
|
||||
if (results.length === 0) {
|
||||
ElMessage.info('未找到相关地址')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
ElMessage.error('搜索失败，请重试')
|
||||
} finally {
|
||||
state.searching = false
|
||||
}
|
||||
}
|
||||
|
||||
// 选择搜索结果
|
||||
const selectSearchResult = (item: any) => {
|
||||
state.selectedLocation = { lat: item.location.lat, lng: item.location.lng }
|
||||
state.selectedAddress = item.address
|
||||
map.center = state.selectedLocation
|
||||
|
||||
// 清空搜索结果
|
||||
state.searchResults = []
|
||||
state.searchKeyword = item.title
|
||||
console.log('拖拽到位置:', { lat, lng })
|
||||
}
|
||||
|
||||
// 确认选择
|
||||
@@ -209,65 +139,20 @@ const handleConfirm = () => {
|
||||
|
||||
const result = {
|
||||
location: state.selectedLocation,
|
||||
address: state.selectedAddress,
|
||||
coordinates: `${state.selectedLocation.lng},${state.selectedLocation.lat}`
|
||||
coordinates: `${state.selectedLocation.lng},${state.selectedLocation.lat}`,
|
||||
// 提供多种坐标格式
|
||||
formats: {
|
||||
lngLat: `${state.selectedLocation.lng},${state.selectedLocation.lat}`,
|
||||
latLng: `${state.selectedLocation.lat},${state.selectedLocation.lng}`,
|
||||
lng: state.selectedLocation.lng,
|
||||
lat: state.selectedLocation.lat
|
||||
}
|
||||
}
|
||||
|
||||
emit('confirm', result)
|
||||
handleClose()
|
||||
}
|
||||
|
||||
// 逆地址解析
|
||||
const reverseGeocode = async (location: { lat: number, lng: number }) => {
|
||||
try {
|
||||
const data = await mapAPI.reverseGeocode(location.lat, location.lng)
|
||||
|
||||
if (data.status === 0) {
|
||||
state.selectedAddress = data.result.address
|
||||
} else {
|
||||
console.error('逆地址解析失败:', data.message)
|
||||
state.selectedAddress = `纬度:${location.lat}, 经度:${location.lng}`
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('逆地址解析错误:', error)
|
||||
state.selectedAddress = `纬度:${location.lat}, 经度:${location.lng}`
|
||||
}
|
||||
}
|
||||
|
||||
// 地址搜索
|
||||
const searchLocation = async (keyword: string) => {
|
||||
try {
|
||||
const data = await mapAPI.searchLocation(keyword)
|
||||
|
||||
if (data.status === 0) {
|
||||
return data.data.map((item: any) => ({
|
||||
title: item.title,
|
||||
address: item.address,
|
||||
location: item.location
|
||||
}))
|
||||
} else {
|
||||
console.error('地址搜索失败:', data.message)
|
||||
return []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('地址搜索错误:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
const initMap = (initialLocation?: any) => {
|
||||
// 这里应该初始化腾讯地图
|
||||
// 由于需要腾讯地图SDK，这里提供一个基础的实现框架
|
||||
console.log('初始化地图', initialLocation)
|
||||
|
||||
// 如果有初始位置，设置地图中心
|
||||
if (initialLocation) {
|
||||
// 设置地图中心到初始位置
|
||||
// map.setCenter(new TMap.LatLng(initialLocation.lat, initialLocation.lng))
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
open
|
||||
@@ -303,33 +188,76 @@ defineExpose({
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-crosshair {
|
||||
/* 鼠标悬停坐标显示 */
|
||||
.hover-coords {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.crosshair-horizontal,
|
||||
.crosshair-vertical {
|
||||
position: absolute;
|
||||
background: #ff4757;
|
||||
.coords-tooltip {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 0px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.crosshair-horizontal {
|
||||
.coords-tooltip i {
|
||||
font-size: 14px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
/* 自定义标记点样式 */
|
||||
.custom-marker {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.marker-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
|
||||
border: 3px solid white;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: rotate(-45deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.marker-icon:hover {
|
||||
transform: rotate(-45deg) scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(255, 107, 107, 0.6);
|
||||
}
|
||||
|
||||
.marker-icon i {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transform: rotate(45deg);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.marker-shadow {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
top: -1px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.crosshair-vertical {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
top: -10px;
|
||||
left: -1px;
|
||||
height: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
margin-top: 2px;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
|
||||
Reference in new issue
Block a user