|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 440 B After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,70 @@
|
|||||||
|
<!--基地点坐标-->
|
||||||
|
<script setup>
|
||||||
|
import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
|
||||||
|
import BaseRightControl from "@/views/system/base/baseRightControl.vue";
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute();
|
||||||
|
const maxHeight = ref(window.innerHeight - 100);
|
||||||
|
const zoom = ref(13);
|
||||||
|
onMounted(()=>{
|
||||||
|
console.log(route.params);
|
||||||
|
})
|
||||||
|
const center = ref([
|
||||||
|
116.338461,
|
||||||
|
39.97947
|
||||||
|
]);
|
||||||
|
// 进入搜索选择的位置
|
||||||
|
const selectPoi = ({poi}) => {
|
||||||
|
center.value = poi.location.toArray()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container" :style="{height:maxHeight+'px'}">
|
||||||
|
<el-amap
|
||||||
|
:center="center"
|
||||||
|
:zoom="zoom"
|
||||||
|
>
|
||||||
|
<!--卫星云图-->
|
||||||
|
<el-amap-layer-satellite :visible="true" />
|
||||||
|
<!--定位控件-->
|
||||||
|
<el-amap-control-geolocation :visible="false"/>
|
||||||
|
<!--地图缩放控件-->
|
||||||
|
<el-amap-control-tool-bar :visible="true" />
|
||||||
|
<!--比例尺-->
|
||||||
|
<el-amap-control-scale :visible="true" />
|
||||||
|
<!--搜索控件-->
|
||||||
|
<el-amap-search-box
|
||||||
|
:visible="false"
|
||||||
|
:debounce="1000"
|
||||||
|
@select="selectPoi"
|
||||||
|
/>
|
||||||
|
<div class="top-block">
|
||||||
|
<base-right-control />
|
||||||
|
</div>
|
||||||
|
</el-amap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.top-block{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
||||||
|
.operate{
|
||||||
|
//该控件可以点击
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.local-icon{
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
:deep(.amap-marker-label){
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||