salary
qsh
5 months ago
parent
e1ff8213bf
commit
ab0c770167
@ -0,0 +1,269 @@ |
|||||||
|
<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 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 |
||||||
|
}) |
||||||
|
|
||||||
|
let AutoComplete = ref(null) |
||||||
|
function initMap() { |
||||||
|
AMapLoader.load({ |
||||||
|
key: '713d839ff505943b0f18e6df45f3b0dc', //设置您的key |
||||||
|
version: '2.0', |
||||||
|
plugins: ['AMap.AutoComplete'] |
||||||
|
}).then((AMap) => { |
||||||
|
aMap.value = AMap |
||||||
|
AutoComplete.value = new AMap.AutoComplete({ |
||||||
|
city: '合肥' |
||||||
|
}) |
||||||
|
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> |
||||||
Loading…
Reference in new issue