58 lines
1023 B
Vue
58 lines
1023 B
Vue
<template>
|
|
<div :id="mapId" class="mapContainer">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {onMounted, onUnmounted, shallowRef} from "vue";
|
|
import {initMap} from "@/utils/aMapUtil";
|
|
|
|
const props = withDefaults(defineProps<{
|
|
plugins?: string[],
|
|
initCallback?: () => void,
|
|
mapOptions?: AMap.MapOptions
|
|
}>(), {
|
|
plugins: () => {
|
|
return []
|
|
},
|
|
mapOptions: () => {
|
|
return {
|
|
// 是否为3D地图模式
|
|
viewMode: "3D",
|
|
// 初始化地图级别
|
|
zoom: 11,
|
|
mapStyle: 'amap://styles/darkblue'
|
|
}
|
|
}
|
|
})
|
|
|
|
const mapId = "mapContainer"
|
|
const map = shallowRef<AMap.Map>(null);
|
|
|
|
defineExpose({
|
|
mapInstance: map
|
|
})
|
|
|
|
onMounted(() => {
|
|
initMap(props.plugins).then(AMap => {
|
|
props.initCallback && props.initCallback()
|
|
map.value = new AMap.Map(mapId, props.mapOptions)
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
map.value?.destroy()
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#mapContainer {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|