<template>
|
<div id="amap-container" className="amap-container"></div>
|
</template>
|
|
<script setup>
|
import {ref, onMounted, onUnmounted} from 'vue'
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
|
// 1. 定义地图实例、点击经纬度、覆盖物存储数组（用于卸载销毁）
|
const mapInstance = ref(null)
|
let markerInstance = ref(null)
|
const clickLngLat = ref({lng: null, lat: null})
|
const clickHandler = ref(null)
|
const mapOverlays = ref([])
|
const IMAGE_URL = '/bigMap2.png'
|
const IMAGE_SIZE = [350, 350]
|
|
|
// 3. 初始化高德地图 + 绘制覆盖物
|
const initAMap = async () => {
|
try {
|
window._AMapSecurityConfig = {
|
securityJsCode: '75ffdb279adfda7feb06d74b3a0352d6',
|
}
|
const AMap = await AMapLoader.load({
|
key: '65cb3e4cbf9f62fd3500cc0f61146cf4',
|
version: '2.0',
|
plugins: ['AMap.MapType']
|
})
|
|
const imageLayer = new AMap.ImageLayer({
|
url:IMAGE_URL,
|
bounds: new AMap.Bounds(
|
[85.114119, 45.594941],
|
[85.122236, 45.600000]
|
),
|
|
});
|
// 初始化地图
|
mapInstance.value = new AMap.Map('amap-container', {
|
viewMode: "3D",
|
zoom: 15.7,
|
center: [85.119484, 45.597606],
|
resizeEnable: true,
|
layers: [
|
AMap.createDefaultLayer(),
|
imageLayer,
|
]
|
})
|
mapInstance.value.addControl(new AMap.MapType({defaultType: 1}))
|
} catch (error) {
|
console.error('高德地图加载失败：', error)
|
}
|
}
|
|
|
// 4. 组件生命周期
|
onMounted(() => {
|
initAMap()
|
})
|
|
onUnmounted(() => {
|
// 销毁地图实例 + 移除点击事件 + 销毁所有覆盖物
|
if (mapInstance.value) {
|
// 移除点击事件
|
if (clickHandler.value) {
|
mapInstance.value.off('click', clickHandler.value)
|
}
|
// 销毁所有覆盖物
|
mapOverlays.value.forEach(overlay => {
|
mapInstance.value.remove(overlay)
|
})
|
// 销毁地图
|
mapInstance.value.destroy()
|
mapInstance.value = null
|
}
|
})
|
</script>
|
|
<style scoped>
|
.amap-container {
|
width: 100%;
|
height: 600px;
|
}
|
|
::v-deep(.amap-ctrl-list-layer) {
|
display: none !important;
|
}
|
</style>
|
