69 lines
1.1 KiB
Vue
69 lines
1.1 KiB
Vue
<template>
|
|
<section class="AiMap">
|
|
<div ref="amap" class="map"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
|
export default {
|
|
name: "AiMap",
|
|
props: {
|
|
plugins: {default: () => ['AMap.DistrictSearch']},
|
|
map: Object,
|
|
lib: Object
|
|
},
|
|
data() {
|
|
return {
|
|
amap: null
|
|
}
|
|
},
|
|
methods: {
|
|
initMap() {
|
|
let {plugins} = this
|
|
AMapLoader.load({
|
|
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
|
version: '2.0',
|
|
plugins
|
|
}).then(AMap => {
|
|
this.amap = new AMap.Map(this.$refs.amap, {
|
|
resizeEnable: true,
|
|
zoom: 14,
|
|
})
|
|
this.$emit('update:lib', AMap)
|
|
this.$emit('update:map', this.amap)
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.initMap()
|
|
},
|
|
destroyed() {
|
|
this.amap?.destroy()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiMap {
|
|
.map {
|
|
height: 100%;
|
|
}
|
|
|
|
::v-deep .amap-logo, ::v-deep .amap-copyright {
|
|
display: none !important;
|
|
}
|
|
|
|
::v-deep .amap-icon {
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|