279 lines
7.4 KiB
Vue
279 lines
7.4 KiB
Vue
<template>
|
||
<div class="relative w-full h-full">
|
||
<div id="mapClue" style="height: 100%"></div>
|
||
<el-autocomplete
|
||
v-model="areaValue"
|
||
clearable
|
||
style="position: absolute; top: 20px; left: 20px; width: 400px"
|
||
placeholder="输入并搜索位置"
|
||
:fetch-suggestions="remoteMethod"
|
||
@select="currentSelect"
|
||
/>
|
||
<el-collapse v-model="collaspeKey" class="box-card">
|
||
<el-collapse-item name="nearbySchool">
|
||
<template #title>
|
||
<span class="ml-10px font-bold" style="font-size: 16px">附近驾校</span>
|
||
</template>
|
||
<div style="padding: 0 10px">
|
||
<div v-if="nearbySchoolSearching">正在搜索中...</div>
|
||
<template v-else>
|
||
<div v-for="p in nearbySchoolList" :key="p.index">
|
||
<div class="hover-pointer" style="font-size: 14px; color: blue">
|
||
<i v-if="p.recommend" class="el-icon-star-off"></i>
|
||
驾校: {{ p.deptName }}-{{ p.name }}
|
||
</div>
|
||
<div class="mt5">地址：{{ p.address }}</div>
|
||
<div class="mt5">
|
||
直线距离: {{ p.distance }} 公里;
|
||
<span class="ml0">步行距离：{{ p.walkdistance }}</span>
|
||
</div>
|
||
<el-divider style="margin: 3px 0 !important" />
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<DialogSchoolInfo ref="placeInfoDialog" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="ClueMap">
|
||
import { getPlaceList } from '@/api/school/place'
|
||
import { getConfigByConfigKey } from '@/api/system/set'
|
||
|
||
import ImgPostion from '@/assets/imgs/flag/position_black.png'
|
||
import FlagRed from '@/assets/imgs/flag/flag_red.png'
|
||
import FlagYellow from '@/assets/imgs/flag/flag_yellow.png'
|
||
import FlagPurple from '@/assets/imgs/flag/flag_purple.png'
|
||
import FlagGreen from '@/assets/imgs/flag/flag_green.png'
|
||
import FlagBlue from '@/assets/imgs/flag/flag_blue.png'
|
||
import FlagBlack from '@/assets/imgs/flag/flag_black.png'
|
||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||
|
||
import DialogSchoolInfo from './DialogSchoolInfo.vue'
|
||
|
||
// 地图相关
|
||
const clueMap = ref(null)
|
||
const aMap = ref(null)
|
||
const areaValue = ref('')
|
||
|
||
const flagMap = {
|
||
red: FlagRed,
|
||
yellow: FlagYellow,
|
||
purple: FlagPurple,
|
||
green: FlagGreen,
|
||
blue: FlagBlue,
|
||
black: FlagBlack
|
||
}
|
||
|
||
const defaultLatLng = ref({
|
||
lat: 31.86119,
|
||
lng: 117.283042
|
||
})
|
||
const defaultCity = ref('合肥')
|
||
|
||
let AutoComplete = ref(null)
|
||
async function initMap() {
|
||
const data = await getConfigByConfigKey({ configKey: 'defaultLocation' })
|
||
const cityInfo = JSON.parse(data.configValue)
|
||
defaultLatLng.value = {
|
||
lat: cityInfo.lat,
|
||
lng: cityInfo.lng
|
||
}
|
||
defaultCity.value = cityInfo.locationName
|
||
AMapLoader.load({
|
||
key: '713d839ff505943b0f18e6df45f3b0dc', //设置您的key
|
||
version: '2.0',
|
||
plugins: ['AMap.AutoComplete']
|
||
}).then((AMap) => {
|
||
aMap.value = AMap
|
||
AutoComplete.value = new AMap.AutoComplete({
|
||
city: defaultCity.value
|
||
})
|
||
clueMap.value = new AMap.Map('mapClue', {
|
||
zoom: 14,
|
||
zooms: [2, 22],
|
||
center: [defaultLatLng.value.lng, defaultLatLng.value.lat]
|
||
})
|
||
getPageData()
|
||
})
|
||
}
|
||
|
||
const placeList = ref([])
|
||
|
||
async function getPageData() {
|
||
placeList.value = []
|
||
const data = await getPlaceList({
|
||
placeStatus: 0
|
||
})
|
||
if (data.placeList) {
|
||
placeList.value = data.placeList
|
||
createMarkersInMap()
|
||
getNearbySchool(defaultLatLng.value)
|
||
}
|
||
}
|
||
|
||
// 生成markers
|
||
function createMarkersInMap() {
|
||
for (let i = 0; i < placeList.value.length; i++) {
|
||
const element = placeList.value[i]
|
||
const markerIcon = flagMap[element.flagColor || 'red']
|
||
const tmpMarker = new aMap.value.Marker({
|
||
map: clueMap.value,
|
||
position: [element.lng, element.lat],
|
||
icon: markerIcon,
|
||
label: {
|
||
content: element.name,
|
||
direction: 'right'
|
||
},
|
||
extData: element
|
||
})
|
||
tmpMarker.on('click', handleClickMarker)
|
||
}
|
||
}
|
||
|
||
const placeInfoDialog = ref()
|
||
function handleClickMarker(ev) {
|
||
placeInfoDialog.value.open(ev.target.getExtData())
|
||
}
|
||
|
||
function remoteMethod(searchValue, cb) {
|
||
if (searchValue) {
|
||
AutoComplete.value?.search(searchValue, (status, result) => {
|
||
if (result.tips?.length) {
|
||
// areaList.value = result?.tips
|
||
const list = result.tips.map((it) => ({
|
||
...it,
|
||
value: it.name
|
||
}))
|
||
cb(list)
|
||
} else {
|
||
cb([])
|
||
}
|
||
})
|
||
} else {
|
||
cb([])
|
||
}
|
||
}
|
||
|
||
function currentSelect(val) {
|
||
if (val) {
|
||
defaultLatLng.value = {
|
||
lng: val.location?.lng,
|
||
lat: val.location?.lat
|
||
}
|
||
addmark(val.location?.lng, val.location?.lat, aMap.value)
|
||
}
|
||
}
|
||
|
||
const marker = ref(null)
|
||
function addmark(lat, lng, AMap) {
|
||
marker.value && removeMarker()
|
||
marker.value = new AMap.Marker({
|
||
position: new AMap.LngLat(lat, lng),
|
||
zoom: 14,
|
||
icon: ImgPostion,
|
||
offset: [-16, -32]
|
||
})
|
||
clueMap.value.add(marker.value)
|
||
clueMap.value.setCenter([lat, lng], true)
|
||
getNearbySchool({ lat: lng, lng: lat })
|
||
}
|
||
|
||
const nearbySchoolList = ref([])
|
||
const nearbySchoolSearching = ref(false)
|
||
const collaspeKey = ref('nearbySchool')
|
||
|
||
function getNearbySchool(info) {
|
||
if (info.lng && info.lat) {
|
||
nearbySchoolList.value = []
|
||
nearbySchoolSearching.value = true
|
||
// 推荐的场地
|
||
let places1 = []
|
||
// 普通的场地
|
||
let places2 = []
|
||
|
||
const p2 = [info.lng, info.lat]
|
||
for (let i = 0; i < placeList.value.length; i++) {
|
||
const element = placeList.value[i]
|
||
const p1 = [element.lng, element.lat]
|
||
// 计算直线距离
|
||
element.distance = (aMap.value.GeometryUtil.distance(p1, p2) / 1000).toFixed(2)
|
||
element.recommend ? places1.push(element) : places2.push(element)
|
||
}
|
||
// 按直线距离排序
|
||
// 排序
|
||
if (places1.length > 1) {
|
||
places1 = places1.sort((a, b) => a.distance - b.distance)
|
||
}
|
||
// 排序
|
||
if (places2.length > 1) {
|
||
places2 = places2.sort((a, b) => a.distance - b.distance)
|
||
}
|
||
// 取普通场地和推荐场地，组合, 取四个
|
||
nearbySchoolList.value = []
|
||
for (let i = 0; i < 4; i++) {
|
||
places1.length > i && nearbySchoolList.value.push(places1[i])
|
||
places2.length > i && nearbySchoolList.value.push(places2[i])
|
||
if (nearbySchoolList.value.length === 4) {
|
||
break
|
||
}
|
||
}
|
||
// 计算步行距离
|
||
nearbySchoolList.value.map(async (item) => {
|
||
const p1 = [item.lng, item.lat]
|
||
const resp = await getWalkingDistance(p1, p2)
|
||
item.walkdistance = resp
|
||
})
|
||
nearbySchoolSearching.value = false
|
||
}
|
||
}
|
||
|
||
// 获取两点之间的步行距离
|
||
async function getWalkingDistance(start, end) {
|
||
return new Promise((resolve) => {
|
||
aMap.value.plugin('AMap.Walking', () => {
|
||
const walking = new aMap.value.Walking()
|
||
let num = 0
|
||
walking.search(start, end, (status, result) => {
|
||
if (status === 'complete') {
|
||
result.routes.forEach((item) => {
|
||
num += item.distance
|
||
})
|
||
resolve(num > 1000 ? `${(num / 1000).toFixed(2)} 公里` : `${num} 米`)
|
||
} else {
|
||
resolve('步行数据无法确定')
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
|
||
function removeMarker() {
|
||
clueMap.value.remove(marker.value)
|
||
}
|
||
|
||
function destroyMap() {
|
||
areaValue.value = undefined
|
||
clueMap.value = null
|
||
aMap.value = null
|
||
}
|
||
|
||
defineExpose({ destroyMap })
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
initMap()
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.box-card {
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
width: 40%;
|
||
}
|
||
</style>
|