<template>
|
<div class="home">
|
<div id="map-box"></div>
|
<div style="position: absolute;bottom: 5%;right: 35%;z-index: 999">
|
<div @click="btnlk" class="item-tb">
|
<img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
|
<p class="item-tb-p">实时路况</p>
|
</div>
|
<div @click="toggleTrafic" class="item-tb">
|
<p class="item-tb-p">地图切换</p>
|
<img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
|
</div>
|
|
</div>
|
<div class="info-box">
|
<!-- right菜单-->
|
<div class="info-div" @click="accidentProneRoadSections">
|
<img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>事故易发多发路段</p>
|
<p>78</p>
|
</div>
|
</div>
|
<div class="info-div" @click="keyTouristChannels">
|
<img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>重点旅游通道</p>
|
<p>178</p>
|
</div>
|
</div>
|
<div class="info-div">
|
<img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>都江堰景区</p>
|
<p>278</p>
|
</div>
|
</div>
|
<div class="info-div" @click="policeForceDeployment">
|
<img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>警力配备</p>
|
<p>348</p>
|
</div>
|
</div>
|
<div class="info-div" @click="fencingConstruction">
|
<img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>打围施工</p>
|
<p>578</p>
|
</div>
|
</div>
|
<div class="info-div">
|
<img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>交通事故易发点</p>
|
<p>788</p>
|
</div>
|
</div>
|
<div class="info-div" @click="keyTransportationEnterprises">
|
<img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>重点运输企业</p>
|
<p>758</p>
|
</div>
|
</div>
|
<div class="info-div">
|
<img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>公交线路</p>
|
<p>785</p>
|
</div>
|
</div>
|
<div class="info-div">
|
<img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
|
<div class="info-div-p">
|
<p>安全隐患</p>
|
<p>718</p>
|
</div>
|
</div>
|
|
<!-- 搜索-->
|
<!-- <el-input-->
|
<!-- v-model="keyword"-->
|
<!-- placeholder="输入关键字搜索"-->
|
<!-- style="width: 300px"-->
|
<!-- @change="handleSearch"-->
|
<!-- >-->
|
<!-- </el-input>-->
|
<!-- <div class="ul">-->
|
<!-- <div class="li" v-for="item in data" :key="item.id" @click="handleSelect(item)">-->
|
<!-- <div class="d-flex flex-column">-->
|
<!-- <span style="margin-bottom: 6px">{{item.name}}</span>-->
|
<!-- <span>地址：{{item.address}}</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
import {Pointer} from "@element-plus/icons-vue";
|
|
const map = shallowRef(null);
|
const keyword = ref('');
|
const addresstext = ref('')
|
const data = ref([]);
|
const coord = ref('');
|
const adcode = ref('')
|
const isVisible = ref(false);
|
const trafficLayer = ref(null);
|
const vectorLayer = ref(null);
|
const isIdent = ref(true);
|
const isKeyTour = ref(true);
|
const trafficVisible = ref(true);
|
let marker = ref(null);
|
let AMapObj, placeSearch, geocoder;
|
const props = defineProps({
|
form:{}
|
})
|
|
onMounted(async () => {
|
await initMap()
|
gddt()
|
});
|
const gddt = () =>{
|
|
}
|
|
const toggleTrafic = () => {
|
emit('changeDt')
|
};
|
const fencingConstruction = () => {
|
//构建信息窗体中显示的内容
|
let info = [];
|
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>xx公园停车场改建</h4>");
|
info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>施工单位：xxxx公司 施工周期：1年 开始时间：2024年1月 本次施工包括xxxxxxxxxxxxxxxxxxxxxx</p>");
|
const infoWindow = new AMap.InfoWindow({
|
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
});
|
//构建信息窗体中显示的内容
|
// marker = new AMap.Marker({
|
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
// position: [103.646554,30.989656],
|
// offset: new AMap.Pixel(-13, -30)
|
// });
|
if (isKeyTour.value){
|
// marker.setMap(map.value);
|
if (marker.value) {
|
marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
|
} else {
|
marker.value = new AMap.Marker({
|
map: map.value,
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
|
position: [103.646233,30.989999],
|
offset: new AMap.Pixel(13, 30),
|
|
});
|
}
|
infoWindow.open(map.value,marker.value.getPosition());
|
isKeyTour.value = false;
|
}else {
|
console.log("清除marker")
|
closeInfoWindow()
|
infoWindow.close()
|
marker.value.setMap(null); // 清除marker
|
// marker.setMap(null)
|
// marker = null;
|
isKeyTour.value =true
|
}
|
|
}
|
const policeForceDeployment = () => {
|
//构建信息窗体中显示的内容
|
let info = [];
|
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>地点名称</h4>");
|
info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>在岗警力 68 在岗警车 5 备勤警力 23</p>");
|
const infoWindow = new AMap.InfoWindow({
|
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
});
|
let startIcon = new AMap.Icon({
|
// 图标尺寸
|
size: new AMap.Size(25, 34),
|
// 图标的取图地址
|
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
|
// 图标所用图片大小
|
imageSize: new AMap.Size(135, 40),
|
// 图标取图偏移量
|
imageOffset: new AMap.Pixel(-9, -3)
|
});
|
//构建信息窗体中显示的内容
|
// marker = new AMap.Marker({
|
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
// position: [103.646554,30.989656],
|
// offset: new AMap.Pixel(-13, -30)
|
// });
|
if (isKeyTour.value){
|
// marker.setMap(map.value);
|
if (marker.value) {
|
marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
|
} else {
|
marker.value = new AMap.Marker({
|
map: map.value,
|
icon: startIcon,
|
position: [103.646044,30.989495],
|
offset: new AMap.Pixel(13, 30)
|
});
|
}
|
infoWindow.open(map.value,marker.value.getPosition());
|
isKeyTour.value = false;
|
}else {
|
|
console.log("清除marker")
|
closeInfoWindow()
|
infoWindow.close()
|
marker.value.setMap(null); // 清除marker
|
// marker.setMap(null)
|
// marker = null;
|
isKeyTour.value =true
|
}
|
|
}
|
const keyTouristChannels = () => {
|
//构建信息窗体中显示的内容
|
let info = [];
|
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>都江堰客运中心</h4>");
|
info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>日累积人流量达到3000+\n" +
|
"\n" +
|
"xxxxxxxxxxxxxxxx</p>");
|
const infoWindow = new AMap.InfoWindow({
|
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
});
|
|
//构建信息窗体中显示的内容
|
// marker = new AMap.Marker({
|
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
// position: [103.646554,30.989656],
|
// offset: new AMap.Pixel(-13, -30)
|
// });
|
if (isKeyTour.value){
|
// marker.setMap(map.value);
|
if (marker.value) {
|
marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
|
} else {
|
marker.value = new AMap.Marker({
|
map: map.value,
|
position: [103.646554,30.989656],
|
offset: new AMap.Pixel(13, 30)
|
});
|
}
|
infoWindow.open(map.value,marker.value.getPosition());
|
isKeyTour.value = false;
|
}else {
|
|
console.log("清除marker")
|
closeInfoWindow()
|
infoWindow.close()
|
marker.value.setMap(null); // 清除marker
|
// marker.setMap(null)
|
// marker = null;
|
isKeyTour.value =true
|
}
|
|
}
|
const accidentProneRoadSections = () => {
|
//构建信息窗体中显示的内容
|
let info = [];
|
|
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>新马路一段</h4>");
|
info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>近三年发生交通事故XX起，其中造成人员伤亡xx起，XXXXXXXXXXXXXXXXXXXXX</p>");
|
const infoWindow = new AMap.InfoWindow({
|
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
});
|
if(isIdent.value){
|
vectorLayer.value = new AMap.VectorLayer({
|
zIndex: 100,
|
});
|
// 添加矢量图层到地图上
|
map.value.add(vectorLayer.value);
|
// 添加路段标注
|
const path = [
|
[103.646504,30.989656],
|
[103.647669,30.989409]
|
];
|
const polyline = new AMap.Polyline({
|
path: path,
|
borderWeight: 5,
|
strokeColor: 'orange',
|
});
|
const markers = new AMap.Marker({
|
icon:'',
|
map: map.value,
|
position: [103.635750,30.983912]
|
});
|
|
|
|
|
infoWindow.open(map.value,[103.646504,30.989656]);
|
// polyline.setMap(map.value);
|
|
// // 添加起点和终点标注
|
// const startMarker = new AMap.Marker({
|
// position: path[0],
|
// map: map.value,
|
// icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
// anchor: 'bottom-center',
|
// });
|
// const endMarker = new AMap.Marker({
|
// position: path[path.length - 1],
|
// map: map.value,
|
// icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
// anchor: 'bottom-center',
|
// });
|
vectorLayer.value.add(polyline);
|
// // 将标注点添加到数组中，用于后续操作（如点击事件）
|
// markers.value = [startMarker, endMarker];
|
isIdent.value = false
|
}else {
|
isIdent.value = true
|
infoWindow.close()
|
closeInfoWindow()
|
vectorLayer.value.clear(); // 清除矢量图层上的所有图形
|
}
|
}
|
const keyTransportationEnterprises = (callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => {
|
let endIcon= new AMap.Icon({
|
size: new AMap.Size(25, 34),
|
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
|
imageSize: new AMap.Size(135, 40),
|
imageOffset: new AMap.Pixel(-95, -3)
|
})
|
const marker = new AMap.Marker({
|
icon:endIcon,
|
map: map.value,
|
position: [103.635750,30.983912]
|
});
|
console.log('重点运输企业')
|
// 添加点击事件打开信息窗体
|
// AMap.event.addListener(marker, 'click', () => {
|
// // 创建信息窗体实例
|
// const infoWindow = new AMap.InfoWindow({
|
// content: '<div style="width: 200px;">这里是自定义信息窗体内容</div>', // 信息窗体内容
|
// offset: new AMap.Pixel(16, -30)
|
// });
|
//
|
// // 打开信息窗体
|
// infoWindow.open(map.value, [103.635750,30.983912]);
|
// });
|
// var marker = new AMap.Marker({
|
// icon: "",
|
// position: [103.635750,30.983912]
|
// });
|
// var marker1 = new AMap.Marker({
|
// icon: "",
|
// position: [103.635750,30.983412]
|
// });
|
map.value.add(marker);
|
map.value.setFitView();
|
// // 删除已有Marker对象使用：
|
// map.value.remove(marker)
|
// // 可以一次性添加多个Marker实例，只需将每个Marker示例放入一个数组Array中。
|
// // 多个点实例组成的数组
|
// const markerList = [marker, marker1];
|
// map.value.add(markerList);
|
// // 绑定Marker实例的事件
|
//
|
// // 绑定事件
|
marker.on('click', clickHandler);
|
|
};
|
function closeInfoWindow() {
|
map.value.clearInfoWindow();
|
}
|
//构建自定义信息窗体
|
function createInfoWindow(title, content) {
|
var info = document.createElement("div");
|
info.className = "custom-info input-card content-window-card";
|
|
//可以通过下面的方式修改自定义窗体的宽高
|
info.style.width = "400px";
|
// 定义顶部标题
|
var top = document.createElement("div");
|
var titleD = document.createElement("div");
|
var closeX = document.createElement("img");
|
top.className = "info-top";
|
titleD.innerHTML = title;
|
closeX.src = "https://webapi.amap.com/images/close2.gif";
|
closeX.onclick = closeInfoWindow;
|
|
top.appendChild(titleD);
|
top.appendChild(closeX);
|
info.appendChild(top);
|
|
// 定义中部内容
|
var middle = document.createElement("div");
|
middle.className = "info-middle";
|
middle.style.backgroundColor = 'white';
|
middle.innerHTML = content;
|
info.appendChild(middle);
|
|
// 定义底部内容
|
var bottom = document.createElement("div");
|
bottom.className = "info-bottom";
|
bottom.style.position = 'relative';
|
bottom.style.top = '0px';
|
bottom.style.margin = '0 auto';
|
var sharp = document.createElement("img");
|
sharp.src = "https://webapi.amap.com/images/sharp.png";
|
bottom.appendChild(sharp);
|
info.appendChild(bottom);
|
return info;
|
}
|
const clickHandler = (e)=> {
|
console.log(e)
|
// alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
|
// 创建信息窗体实例
|
var title = '正华物流',
|
content = [];
|
content.push("正华物流主要从事XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
|
content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>");
|
const infoWindow = new AMap.InfoWindow({
|
content: createInfoWindow(title, content.join("<br/>")), // 信息窗体内容
|
offset: new AMap.Pixel(10, -280)
|
});
|
|
// 打开信息窗体
|
infoWindow.open(map.value, [103.635750,30.983912]);
|
};
|
const btnlk= ()=>{
|
console.log('实时路况图层',isVisible.value)
|
|
if (isVisible.value){
|
trafficLayer.value.show();
|
isVisible.value = false
|
}else{
|
// map.value.removePlugin('map-box');
|
console.log('隐藏实时路况图层',isVisible.value)
|
// map.value.removePlugin('AMap.TruckDriving');
|
trafficLayer.value.hide();
|
isVisible.value = true
|
}
|
}
|
function initMap(){
|
AMapLoader.load({
|
key: 'f7251c9df6162e94e699f1720f7932c4', //设置您的key
|
version: "2.0",
|
plugins: ['AMap.ToolBar','AMap.Driving'],
|
AMapUI: {
|
version: "1.1",
|
plugins: [],
|
|
},
|
Loca:{
|
version: "2.0.0"
|
},
|
}).then((AMap)=>{
|
// console.log(AMap);
|
AMapObj = AMap;
|
map.value = new AMap.Map("map-box",{
|
viewMode:"3D",
|
zoom:12,
|
zooms:[2,22],
|
center: [103.635750,30.983912],
|
mapStyle: "amap://styles/grey",
|
});
|
// 实例化TileLayer.Traffic实例
|
trafficLayer.value = new AMap.TileLayer.Traffic({
|
zIndex: 10, // 设置路况图层的zIndex
|
showTraffic:true
|
});
|
|
// 将实时路况图层添加到地图上
|
trafficLayer.value.setMap(map.value);
|
|
|
|
map.value.on('click', onMapClick);
|
AMap.plugin(
|
['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
|
'AMap.Geocoder','AMap.AutoComplete'],
|
() => {
|
// 缩放条
|
const toolbar = new AMap.ToolBar();
|
// 比例尺
|
const scale = new AMap.Scale();
|
// 定位
|
const geolocation = new AMap.Geolocation({
|
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
|
timeout: 10000, // 超过10秒后停止定位，默认：5s
|
position: 'RT', // 定位按钮的停靠位置
|
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
|
});
|
geocoder = new AMap.Geocoder({
|
city: '全国',
|
});
|
map.value.addControl(geolocation);
|
map.value.addControl(toolbar);
|
map.value.addControl(scale);
|
placeSearch = new AMap.PlaceSearch({
|
city: '全国',
|
pageSize: 10, // 单页显示结果条数
|
pageIndex: 1, // 页码
|
citylimit: false, // 是否强制限制在设置的城市内搜索
|
autoFitView: true,
|
});
|
});
|
if(props.form){
|
keyword.value=props.form.adress
|
handleSearch(props.form.adress)
|
let e={
|
lnglat:{
|
lng:props.form.longitude,
|
lat: props.form.latitude
|
}
|
}
|
onMapClick(e)
|
}
|
}).catch(e=>{
|
console.log(e);
|
})
|
}
|
|
// 搜索地图
|
function handleSearch(str) {
|
placeSearch.search(str, (status, result) => {
|
if (result && typeof result === 'object' && result.poiList) {
|
const list = result.poiList.pois;
|
list.forEach(item => {
|
item.value = item.name;
|
item.label = item.name;
|
});
|
data.value = list
|
}
|
});
|
}
|
// 点击地图
|
function onMapClick(e) {
|
coord.value = e.lnglat.lng + ',' + e.lnglat.lat
|
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
// result为对应的地理位置详细信息
|
keyword.value = result.regeocode.formattedAddress
|
addresstext.value = result.regeocode.formattedAddress
|
adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
|
}
|
})
|
drawMarker(e.lnglat)
|
}
|
function onMapadcode (e){
|
geocoder.getAddress([e.location.lng, e.location.lat], function(status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
// result为对应的地理位置详细信息
|
adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
|
}
|
})
|
}
|
// 点击搜索项
|
function handleSelect(item) {
|
drawMarker(item.location)
|
onMapadcode(item)
|
if (item.location != null) {
|
coord.value = item.location.lng + ',' + item.location.lat
|
keyword.value = item.name
|
addresstext.value = item.address
|
|
}
|
}
|
// 绘制地点marker
|
function drawMarker(location) {
|
let marker
|
if (location == null) return
|
let longitude = location.lng, latitude = location.lat
|
if (marker) {
|
marker.setMap(null);
|
}
|
marker = new AMapObj.Marker({
|
position: new AMapObj.LngLat(longitude, latitude),
|
anchor: 'bottom-center',
|
});
|
marker.on('click', () => {
|
coord.value = location;
|
})
|
map.value.add(marker);
|
map.value.setZoomAndCenter(16, [longitude, latitude]);
|
}
|
const emit = defineEmits(['btnAddress','changeDt'])
|
function btnsubmit(){
|
emit('btnAddress',coord.value,addresstext.value,adcode.value)
|
}
|
// initMap();
|
</script>
|
<style>
|
html, body, #container {
|
height: 100%;
|
width: 100%;
|
}
|
|
.content-window-card {
|
position: relative;
|
box-shadow: none;
|
bottom: 0;
|
left: 0;
|
width: auto;
|
padding: 0;
|
}
|
|
.content-window-card p {
|
height: 2rem;
|
}
|
|
.custom-info {
|
border: solid 1px silver;
|
}
|
|
div.info-top {
|
position: relative;
|
background: none repeat scroll 0 0 #F9F9F9;
|
border-bottom: 1px solid #CCC;
|
border-radius: 5px 5px 0 0;
|
}
|
|
div.info-top div {
|
display: inline-block;
|
color: #333333;
|
font-size: 14px;
|
font-weight: bold;
|
line-height: 31px;
|
padding: 0 10px;
|
}
|
|
div.info-top img {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
transition-duration: 0.25s;
|
}
|
|
div.info-top img:hover {
|
box-shadow: 0px 0px 5px #000;
|
}
|
|
div.info-middle {
|
font-size: 12px;
|
padding: 10px 6px;
|
line-height: 20px;
|
}
|
|
div.info-bottom {
|
display: none;
|
height: 0px;
|
width: 100%;
|
clear: both;
|
text-align: center;
|
}
|
|
div.info-bottom img {
|
position: relative;
|
z-index: 104;
|
}
|
|
span {
|
margin-left: 5px;
|
//font-size: 11px;
|
}
|
|
.info-middle img {
|
//float: left;
|
height: 100%;
|
width: 100%;
|
margin-right: 6px;
|
}
|
</style>
|
<style lang="scss" scoped>
|
|
.home{
|
height: 100%;
|
width: 100%;
|
padding: 0px;
|
margin: 0px;
|
position: relative;
|
.info-div{
|
align-items: center;
|
display: flex;
|
cursor: pointer;
|
margin-top: 0.5rem;
|
//background-color: #4E2749;
|
height: 2.5rem;
|
line-height: 2.5rem;
|
padding-left: 0.5rem;
|
font-family: PingFang SC;
|
font-weight: 800;
|
color: #74A6F2;
|
.item-tb-img{
|
width: 20px;
|
height: 20px;
|
}
|
.info-div-p{
|
flex: 1;
|
margin-left: 5px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
.info-box {
|
position: absolute;
|
top: 80px;
|
right: 34%;
|
width: 300px;
|
//height: 100%;
|
//background-color: #1f1f1f;
|
opacity: 0.6;
|
background: #11223A;
|
border: 1px solid #29466A;
|
//background-color: #131F3F;
|
padding: 1rem;
|
display: flex;
|
flex-direction: column;
|
}
|
.item-tb{
|
cursor: pointer;
|
margin-top: 20px;
|
.item-tb-img{
|
width: 65px;
|
}
|
.item-tb-p{
|
line-height:35px;
|
//background: #00adb5;
|
color:#fff;
|
text-align: center;
|
text-shadow:
|
0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
|
}
|
}
|
}
|
.ul{
|
margin-top: 10px;
|
height: 60%;
|
overflow-y: scroll;
|
.li{
|
padding: 5px 10px;
|
background: #FFFFFF;
|
margin-bottom: 10px;
|
min-height: 60px;
|
.d-flex{
|
background: #FFFFFF;
|
color: #1f1f1f;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
|
#map-box{
|
height: calc(100% - 30px);
|
width: 100%;
|
padding: 0px;
|
margin: 0px;
|
}
|
.btn{
|
padding: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
|
<style scoped >
|
:deep() .amap-logo {
|
display: none !important;
|
}
|
:deep() .amap-copyright {
|
display: none !important;
|
}
|
</style>
|
