You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.6 KiB
132 lines
2.6 KiB
1 year ago
|
<template>
|
||
|
|
<div class='AMapContainer' v-loading="loading" element-loading-text="地图加载中..." element-loading-spinner="el-icon-place"
|
||
|
|
element-loading-background="rgba(0, 0, 0, 0.42)" ref="mapContainerRef"
|
||
|
|
:style="{ ...this.size, ...getReverseStyle }" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { onceObserver } from "@screen/utils/resizeObserver";
|
||
|
|
import { loadAMap } from "./loadAMap"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'AMapContainer',
|
||
|
|
inject: [
|
||
|
|
'adpScale'
|
||
|
|
],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
size: null,
|
||
|
|
loading: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
getReverseStyle() {
|
||
|
|
return {
|
||
|
|
transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY})`,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
// console.log(this.$refs.mapContainerRef);
|
||
|
|
this.AMap = await loadAMap();
|
||
|
|
|
||
|
|
if (!this.AMap) return;
|
||
|
|
|
||
|
|
onceObserver.call(this, this.$refs.mapContainerRef.parentElement, ({ width, height }) => this.size = {
|
||
|
|
width: `${width}px`,
|
||
|
|
height: `${height + 24}px`,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.aMapIns = new this.AMap.Map(this.$refs.mapContainerRef, {
|
||
|
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
||
|
|
mapStyle: "amap://styles/blue",
|
||
|
|
zoom: 9,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.aMapIns.on('complete', () => {
|
||
|
|
this.loading = false;
|
||
|
|
|
||
|
|
// var polyline1 = new this.AMap.Polyline({
|
||
|
|
// path: [],
|
||
|
|
// strokeColor: "#67EBF7",
|
||
|
|
// strokeWeight: 6,
|
||
|
|
// strokeOpacity: 0.9,
|
||
|
|
// zIndex: 50,
|
||
|
|
// bubble: true,
|
||
|
|
// })
|
||
|
|
// this.aMapIns.add([polyline1])
|
||
|
|
})
|
||
|
|
|
||
|
|
// this.aMapIns.enableAutoResize();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getMapInstance() {
|
||
|
|
return {
|
||
|
|
AMap: this.AMap,
|
||
|
|
mapIns: this.aMapIns,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
unmounted() {
|
||
|
|
if (!this.aMapIns) return;
|
||
|
|
this.aMapIns.destroyed();
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.AMapContainer {
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
transform-origin: left top;
|
||
|
|
background-color: #103253 !important;
|
||
|
|
transition: all .15s linear;
|
||
|
|
|
||
|
|
::v-deep {
|
||
|
|
.el-loading-mask {
|
||
|
|
user-select: none;
|
||
|
|
|
||
|
|
.el-loading-spinner {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
|
||
|
|
.el-loading-text,
|
||
|
|
.el-icon-place {
|
||
|
|
color: #59D1FE;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-icon-place {
|
||
|
|
font-size: 18px;
|
||
|
|
animation: 1.2s infinite jump;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes jump {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
20%,
|
||
|
|
50%,
|
||
|
|
80%,
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
transform: translateY(-30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
transform: translateY(-15px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|