64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<div class="dialog">
|
|
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
|
|
<div id="big-car-ship" class="big-car-ship" />
|
|
<img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import carIcon from '@/assets/images/car.png'
|
|
import shipIcon from '@/assets/images/ship.png'
|
|
import { useMap } from '@/hooks/map'
|
|
|
|
let modelValue = defineModel()
|
|
const { map, initMap, addMarker } = useMap()
|
|
|
|
watch(
|
|
() => modelValue.value,
|
|
(val) => {
|
|
if (val && !map.value) {
|
|
setTimeout(() => {
|
|
initMap('big-car-ship', 109.491961, 31.024285, 16)
|
|
addMarker(carIcon, [109.491045, 31.028725], [36, 50])
|
|
addMarker(carIcon, [109.483266, 31.024718], [36, 50])
|
|
addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
|
|
addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
|
|
}, 500)
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.BMap_cpyCtrl) {
|
|
display: none;
|
|
}
|
|
:deep(.anchorBL) {
|
|
display: none;
|
|
}
|
|
.dialog {
|
|
:deep(.el-dialog) {
|
|
width: vw(2540);
|
|
height: vh(900);
|
|
padding: 0;
|
|
}
|
|
:deep(.el-dialog__header) {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
}
|
|
.big-car-ship {
|
|
width: vw(2540);
|
|
height: vh(900);
|
|
}
|
|
.close {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: vw(20);
|
|
top: vh(20);
|
|
width: vw(60);
|
|
z-index: 9999;
|
|
}
|
|
</style>
|