linghe/acdr
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
aiShuiJiaoDeXioShou 2024-10-01 09:11:52 +08:00
parent d9783e74d7
commit 9253b53d5a
2 changed files with 210 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
acdr-ui/src/components/Search.vue
View File

@ -6,6 +6,7 @@
cancel-txt="搜索" cancel-txt="搜索"
@search="search" @search="search"
@cancel="search" @cancel="search"
custom-class="wd-search"
> >
<template #prefix> <template #prefix>
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType"> <wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
@ -58,7 +59,7 @@ const changeSearchType = ({ item, index }) => {
} }
.search-type::after { .search-type::after {
position: absolute; position: absolute;
content: ''; content: "";
width: 1px; width: 1px;
right: 0; right: 0;
top: 5px; top: 5px;

424
acdr-ui/src/utils/map-utils.js
View File

@ -1,251 +1,243 @@
import config from './config' // 确保引入配置文件 // import config from './config' // 确保引入配置文件
// H5 平台导入 // // H5 平台导入
// #ifdef H5 // // #ifdef H5
import AMapLoader from '@amap/amap-jsapi-loader' // import AMapLoader from '@amap/amap-jsapi-loader'
let AMap = null // let AMap = null
let map = null // let map = null
// 初始化高德地图 (H5) // // 初始化高德地图 (H5)
const initAMap = async () => { // const initAMap = async () => {
if (!AMap) { // if (!AMap) {
AMap = await AMapLoader.load({ // AMap = await AMapLoader.load({
key: config.AMapKey, // key: config.AMapKey,
version: '2.0', // version: '2.0',
plugins: ['AMap.Geocoder', 'AMap.Geolocation', 'AMap.ToolBar'], // plugins: ['AMap.Geocoder', 'AMap.Geolocation', 'AMap.ToolBar'],
}) // })
} // }
} // }
// 初始化地图容器 (H5) // // 初始化地图容器 (H5)
export const initMapH5 = async (containerId, center = [116.397428, 39.90923], zoom = 15) => { // export const initMapH5 = async (containerId, center = [116.397428, 39.90923], zoom = 15) => {
await initAMap() // 确保 AMap 已经加载 // await initAMap() // 确保 AMap 已经加载
if (!map) { // if (!map) {
map = new AMap.Map(containerId, { // map = new AMap.Map(containerId, {
center, // center,
zoom, // zoom,
}) // })
} // }
return map // return map
} // }
// 获取当前位置和详细地址 (H5) // // 获取当前位置和详细地址 (H5)
export const getCurrentLocationH5 = async () => { // export const getCurrentLocationH5 = async () => {
await initAMap() // 确保 AMap 已经加载 // await initAMap() // 确保 AMap 已经加载
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
const geolocation = new AMap.Geolocation({ // const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // enableHighAccuracy: true,
timeout: 10000, // timeout: 10000,
zoomToAccuracy: true, // zoomToAccuracy: true,
}) // })
geolocation.getCurrentPosition((status, result) => { // geolocation.getCurrentPosition((status, result) => {
if (status === 'complete' && result) { // if (status === 'complete' && result) {
const geocoder = new AMap.Geocoder() // const geocoder = new AMap.Geocoder()
geocoder.getAddress([result.position.lng, result.position.lat], (geoStatus, geoResult) => { // geocoder.getAddress([result.position.lng, result.position.lat], (geoStatus, geoResult) => {
if (geoStatus === 'complete' && geoResult) { // if (geoStatus === 'complete' && geoResult) {
const locationInfo = { // const locationInfo = {
latitude: result.position.lat, // latitude: result.position.lat,
longitude: result.position.lng, // longitude: result.position.lng,
address: geoResult.regeocode.formattedAddress, // address: geoResult.regeocode.formattedAddress,
} // }
resolve(locationInfo) // resolve(locationInfo)
} else { // } else {
reject('逆地理编码失败') // reject('逆地理编码失败')
} // }
}) // })
} else { // } else {
reject('定位失败，请检查网络或定位权限') // reject('定位失败，请检查网络或定位权限')
} // }
}) // })
}) // })
} // }
// 显示当前位置在地图上 (H5) // // 显示当前位置在地图上 (H5)
export const showLocationOnMapH5 = (locationInfo) => { // export const showLocationOnMapH5 = (locationInfo) => {
if (!map) return // if (!map) return
const marker = new AMap.Marker({ // const marker = new AMap.Marker({
position: [locationInfo.longitude, locationInfo.latitude], // position: [locationInfo.longitude, locationInfo.latitude],
map, // map,
}) // })
map.setCenter([locationInfo.longitude, locationInfo.latitude]) // map.setCenter([locationInfo.longitude, locationInfo.latitude])
map.setFitView([marker]) // 自动调整地图视野以适应所有标记 // map.setFitView([marker]) // 自动调整地图视野以适应所有标记
} // }
// 添加两点之间的连线和显示距离 (H5) // // 添加两点之间的连线和显示距离 (H5)
export const addLineAndDistanceH5 = (startLocation, endLocation) => { // export const addLineAndDistanceH5 = (startLocation, endLocation) => {
if (!map) return // if (!map) return
const start = new AMap.LngLat(startLocation.longitude, startLocation.latitude) // const start = new AMap.LngLat(startLocation.longitude, startLocation.latitude)
const end = new AMap.LngLat(endLocation.longitude, endLocation.latitude) // const end = new AMap.LngLat(endLocation.longitude, endLocation.latitude)
const polyline = new AMap.Polyline({ // const polyline = new AMap.Polyline({
path: [start, end], // path: [start, end],
isOutline: true, // isOutline: true,
outlineColor: '#ffeeff', // outlineColor: '#ffeeff',
borderWeight: 2, // borderWeight: 2,
strokeColor: '#3366FF', // strokeColor: '#3366FF',
strokeOpacity: 1, // strokeOpacity: 1,
strokeWeight: 3, // strokeWeight: 3,
strokeStyle: 'solid', // strokeStyle: 'solid',
strokeDasharray: [10, 5], // strokeDasharray: [10, 5],
}) // })
map.add(polyline) // map.add(polyline)
// 计算距离并在地图上显示 // // 计算距离并在地图上显示
const distance = Math.round(start.distance(end)) // 计算距离 // const distance = Math.round(start.distance(end)) // 计算距离
const distanceMarker = new AMap.Text({ // const distanceMarker = new AMap.Text({
text: `${distance} 米`, // text: `${distance} 米`,
anchor: 'bottom-center', // anchor: 'bottom-center',
position: new AMap.LngLat( // position: new AMap.LngLat(
(startLocation.longitude + endLocation.longitude) / 2, // (startLocation.longitude + endLocation.longitude) / 2,
(startLocation.latitude + endLocation.latitude) / 2, // (startLocation.latitude + endLocation.latitude) / 2,
), // ),
}) // })
map.add(distanceMarker) // map.add(distanceMarker)
map.setFitView([polyline]) // 调整地图视野使其适应连线 // map.setFitView([polyline]) // 调整地图视野使其适应连线
} // }
// #endif // // #endif
// 微信小程序平台导入 // // 微信小程序平台导入
// #ifdef MP-WEIXIN // // #ifdef MP-WEIXIN
const amapFile = require('../static/js/amap-wx') // const amapFile = require('@/static/js/amap-wx')
const amapPlugin = new amapFile.AMapWX({ // const amapPlugin = new amapFile.AMapWX({
key: config.AMapKey, // key: config.AMapKey,
}) // })
// 获取当前位置和详细地址 (微信小程序) // // 获取当前位置和详细地址 (微信小程序)
export const getCurrentLocationWx = () => { // export const getCurrentLocationWx = () => {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
amapPlugin.getRegeo({ // amapPlugin.getRegeo({
success: (data) => { // success: (data) => {
if (data && data.length > 0) { // if (data && data.length > 0) {
const locationInfo = { // const locationInfo = {
latitude: data[0].latitude, // latitude: data[0].latitude,
longitude: data[0].longitude, // longitude: data[0].longitude,
address: data[0].regeocodeData.formatted_address, // address: data[0].regeocodeData.formatted_address,
} // }
resolve(locationInfo) // resolve(locationInfo)
} else { // } else {
reject('未能获取到详细地址信息') // reject('未能获取到详细地址信息')
} // }
}, // },
fail: (error) => { // fail: (error) => {
reject('定位失败: ' + error.message) // reject('定位失败: ' + error.message)
}, // },
}) // })
}) // })
} // }
// 显示当前位置在地图上 (微信小程序) // // 显示当前位置在地图上 (微信小程序)
export const showLocationOnMapWx = (mapContext, locationInfo) => { // export const showLocationOnMapWx = (mapContext, locationInfo) => {
if (mapContext && locationInfo && locationInfo.latitude && locationInfo.longitude) { // if (mapContext && locationInfo && locationInfo.latitude && locationInfo.longitude) {
mapContext.moveToLocation({ // mapContext.moveToLocation({
latitude: locationInfo.latitude, // latitude: locationInfo.latitude,
longitude: locationInfo.longitude, // longitude: locationInfo.longitude,
}) // })
} else { // } else {
console.error('Invalid mapContext or locationInfo') // console.error('Invalid mapContext or locationInfo')
} // }
} // }
// 添加两点之间的连线和显示距离 (微信小程序) // // 添加两点之间的连线和显示距离 (微信小程序)
export const addLineAndDistanceWx = (mapContext, startLocation, endLocation) => { // export const addLineAndDistanceWx = (mapContext, startLocation, endLocation) => {
mapContext.addPolyline({ // mapContext.addPolyline({
points: [ // points: [
{ // {
longitude: startLocation.longitude, // longitude: startLocation.longitude,
latitude: startLocation.latitude, // latitude: startLocation.latitude,
}, // },
{ // {
longitude: endLocation.longitude, // longitude: endLocation.longitude,
latitude: endLocation.latitude, // latitude: endLocation.latitude,
}, // },
], // ],
color: '#3366FF', // color: '#3366FF',
width: 4, // width: 4,
dottedLine: false, // dottedLine: false,
}) // })
amapPlugin.getDistance({ // amapPlugin.getDistance({
origin: `${startLocation.longitude},${startLocation.latitude}`, // origin: `${startLocation.longitude},${startLocation.latitude}`,
destination: `${endLocation.longitude},${endLocation.latitude}`, // destination: `${endLocation.longitude},${endLocation.latitude}`,
success: (data) => { // success: (data) => {
if (data && data.distance) { // if (data && data.distance) {
// 显示距离（在页面中处理，微信地图不直接支持文本标记） // // 显示距离（在页面中处理，微信地图不直接支持文本标记）
console.log(`距离: ${data.distance} 米`) // console.log(`距离: ${data.distance} 米`)
} // }
}, // },
}) // })
} // }
// 微信小程序的初始化地图函数 // // 微信小程序的初始化地图函数
const initMapWeixin = (containerId, center, zoom) => { // const initMapWeixin = (containerId, center, zoom) => {
const mapContext = wx.createMapContext(containerId) // const mapContext = wx.createMapContext(containerId)
// 设置中心点和缩放级别（微信小程序中缩放级别可以在地图组件中设置） // // 设置中心点和缩放级别（微信小程序中缩放级别可以在地图组件中设置）
mapContext.moveToLocation({ // mapContext.moveToLocation({
latitude: center[1], // latitude: center[1],
longitude: center[0], // longitude: center[0],
}) // })
// 可以返回 mapContext 以便后续使用 // // 可以返回 mapContext 以便后续使用
return mapContext // return mapContext
} // }
// #endif // // #endif
// 公共API // // 公共API
// 初始化地图 (根据平台调用) // // 初始化地图 (根据平台调用)
export const initMap = async (containerId, center = [116.397428, 39.90923], zoom = 15) => { // export const initMap = async (containerId, center = [116.397428, 39.90923], zoom = 15) => {
// #ifdef H5 // // #ifdef H5
return await initMapH5(containerId, center, zoom) // return await initMapH5(containerId, center, zoom)
// #endif // // #endif
// }
// #ifdef MP-WEIXIN // // 获取当前位置和详细地址
return initMapWeixin(containerId, center, zoom) // export const getCurrentLocation = () => {
// #endif // // #ifdef H5
} // return getCurrentLocationH5()
// // #endif
// }
// 获取当前位置和详细地址 // // 显示当前位置在地图上
export const getCurrentLocation = () => { // export const showLocationOnMap = (mapContextOrContainerId, locationInfo) => {
// #ifdef H5 // // #ifdef H5
return getCurrentLocationH5() // showLocationOnMapH5(locationInfo)
// #endif // // #endif
// #ifdef MP-WEIXIN // // #ifdef MP-WEIXIN
return getCurrentLocationWx() // showLocationOnMapWx(mapContextOrContainerId, locationInfo)
// #endif // // #endif
} // }
// 显示当前位置在地图上 // // 添加两点之间的连线和显示距离
export const showLocationOnMap = (mapContextOrContainerId, locationInfo) => { // export const addLineAndDistance = (mapContextOrContainerId, startLocation, endLocation) => {
// #ifdef H5 // // #ifdef H5
showLocationOnMapH5(locationInfo) // addLineAndDistanceH5(startLocation, endLocation)
// #endif // // #endif
// #ifdef MP-WEIXIN // // #ifdef MP-WEIXIN
showLocationOnMapWx(mapContextOrContainerId, locationInfo) // addLineAndDistanceWx(mapContextOrContainerId, startLocation, endLocation)
// #endif // // #endif
} // }
// 添加两点之间的连线和显示距离
export const addLineAndDistance = (mapContextOrContainerId, startLocation, endLocation) => {
// #ifdef H5
addLineAndDistanceH5(startLocation, endLocation)
// #endif
// #ifdef MP-WEIXIN
addLineAndDistanceWx(mapContextOrContainerId, startLocation, endLocation)
// #endif
}