地图搜索功能，信息窗体样式修改，缩略图，卫星控件
This commit is contained in:
parent
f4101e26af
commit
4cf5a6c10a
@ -1,126 +1,285 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="contain">
|
||||||
<baidu-map
|
<baidu-map
|
||||||
class="map"
|
class="map"
|
||||||
|
:scroll-wheel-zoom="true"
|
||||||
|
:double-click-zoom="false"
|
||||||
|
@zoomend="mouseEvent"
|
||||||
:center="center"
|
:center="center"
|
||||||
:zoom="zoom"
|
:zoom="zoom">
|
||||||
scroll-wheel-zoom
|
<!-- 跳转菜单-->
|
||||||
@ready="changeCenterAndZoom"
|
<bm-context-menu width="250">
|
||||||
:mapStyle="mapStyle"
|
<bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
|
||||||
>
|
<bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
|
||||||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
</bm-context-menu>
|
||||||
|
<!-- 右上角地图类型切换-->
|
||||||
<div v-for="(item, index) in markers" :key="index">
|
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
|
||||||
<bm-marker
|
<!--右下角缩略图-->
|
||||||
|
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
|
||||||
|
<!-- 右下角定位-->
|
||||||
|
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<bm-control :offset="{width: '10px', height: '10px'}">
|
||||||
|
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
|
||||||
|
<el-input class="complete" v-model="keyword"></el-input>
|
||||||
|
</bm-auto-complete>
|
||||||
|
<el-button type="primary" @click="search">搜索</el-button>
|
||||||
|
</bm-control>
|
||||||
|
<!--缩放控件-->
|
||||||
|
<!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
|
||||||
|
<bm-marker v-for="(item,key ) of this.mapList" :key="key"
|
||||||
|
:title="item.content"
|
||||||
|
:icon="iconUrl"
|
||||||
:position="item.position"
|
:position="item.position"
|
||||||
:icon="item.icon"
|
:dragging="true"
|
||||||
@click="infoWindowOpen(item)"
|
@click="infoWindowOpen(item)"
|
||||||
>
|
:animation="item.animal">
|
||||||
<bm-info-window
|
<!-- 信息窗体-->
|
||||||
:show="item.show"
|
<bm-info-window :auto-pan="true" :show="item.show" @close="infoWindowClose(item)">
|
||||||
@close="infoWindowClose(item)"
|
<div style="color:#fff;font-size:16px;">
|
||||||
@open="infoWindowOpen(item)"
|
<div style="width:220px;font-size: 20px">摄像头数据信息</div>
|
||||||
>
|
<div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
|
||||||
<div class="info-window">
|
<div style="margin-top:10px;width:300px"> 所属组织：{{ item.origin }}</div>
|
||||||
<div v-for="device in item.deviceInfo">
|
<div style="margin-top:5px;width:300px"> 详细地址：{{ item.address }}</div>
|
||||||
<div style="cursor: pointer; color: #fff;" @click="goDevice(device.gateway.mac)">{{$t('lang.device')}} {{device.gateway.mac}}</div>
|
<div style="margin-top:5px;width:300px"> 经度：{{ item.position.lng }}</div>
|
||||||
<div style="margin-top:5px">
|
<div style="margin-top:5px;width:300px"> 纬度：{{ item.position.lng }}</div>
|
||||||
<span style="color: red" v-if="device.status==0">{{$t('lang.offline')}}</span>
|
<div style="margin-top:5px;width:300px"> IP地址：{{ item.ip }}</div>
|
||||||
<span style="color: #67c23a" v-if="device.status==1">{{$t('lang.online')}}</span>
|
<div style="margin-top:5px;width:220px"> 摄像机类型：{{ item.type }}</div>
|
||||||
<span v-if="device.status==2">{{$t('lang.alarm')}}</span>
|
<div style="margin-top:5px;width:220px"> 备注：{{ item.name }}</div>
|
||||||
<span v-if="device.status==3">{{$t('lang.fault')}}</span>
|
<!-- <img :src="iconUrl.url" style="width:100%" />-->
|
||||||
</div>
|
|
||||||
<el-divider></el-divider>
|
|
||||||
</div>
|
|
||||||
<div class="address">{{$t('lang.detail-site')}}:{{item.address}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</bm-info-window>
|
</bm-info-window>
|
||||||
</bm-marker>
|
</bm-marker>
|
||||||
</div>
|
|
||||||
|
|
||||||
</baidu-map>
|
</baidu-map>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
</script>
|
return{
|
||||||
<style>
|
mapList:[
|
||||||
.baidu-map {
|
{
|
||||||
|
position: { lng: 103.931057, lat: 30.755467 },
|
||||||
.BMap_bottom {
|
show:false,
|
||||||
display: none;
|
origin:"公共安全中心实验室",
|
||||||
|
address:"广东省深圳市观澜街道银星智界二期3号楼",
|
||||||
|
ip:"192.168.1.108",
|
||||||
|
type:"华为",
|
||||||
|
content:"这是一个摄像头",
|
||||||
|
name:"摄像头1",
|
||||||
|
animal:"BMAP_ANIMATION_DROP"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: { lng: 103.831057, lat: 30.755467 },
|
||||||
|
show:false,
|
||||||
|
content:"这是一个摄像头",
|
||||||
|
name:"2",
|
||||||
|
animal:"BMAP_ANIMATION_DROP"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: { lng: 103.931057, lat: 30.765467 },
|
||||||
|
show:false,
|
||||||
|
content:"这是一个摄像头",
|
||||||
|
name:"3",
|
||||||
|
animal:"BMAP_ANIMATION_DROP"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
keyword: '',
|
||||||
|
// item:{
|
||||||
|
// position: { lng: 103.931057, lat: 30.755467 },
|
||||||
|
// show:false,
|
||||||
|
// content:"这是一个摄像头"
|
||||||
|
// },
|
||||||
|
iconUrl: {
|
||||||
|
url: require("../../../assets/img/video.png"),
|
||||||
|
size: { width: 30, height: 30 }
|
||||||
|
},
|
||||||
|
zoom:14,
|
||||||
|
center: {
|
||||||
|
lng: 103.931057, lat: 30.755467
|
||||||
|
},
|
||||||
|
point:{
|
||||||
|
lng: 103.931057, lat: 30.755467,
|
||||||
|
showFlag:true,
|
||||||
|
regionName:"11",
|
||||||
|
location:"22",
|
||||||
|
severity:"",
|
||||||
|
reporterName:"",
|
||||||
|
reporterPhone:"",
|
||||||
|
orderPeopleStr:"",
|
||||||
|
repairStartTime:"",
|
||||||
|
information:"",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//逆地址解析
|
||||||
|
search() {
|
||||||
|
console.log("kaishishou")
|
||||||
|
console.log(this.mapList)
|
||||||
|
console.log(this.keyword)
|
||||||
|
for (let i = 0; i <this.mapList.length ; i++) {
|
||||||
|
if (this.mapList[i].name == this.keyword ){
|
||||||
|
//到摄像头列表中搜索，将信息窗体显示出来
|
||||||
|
console.log(this.mapList[i])
|
||||||
|
this.mapList[i].show = true;
|
||||||
|
this.mapList[i].animal ="BMAP_ANIMATION_BOUNCE";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
|
||||||
|
infoWindowClose(param) {
|
||||||
|
param.show = false
|
||||||
|
console.log(param.show)
|
||||||
|
},
|
||||||
|
// 覆盖物 点 信息窗体 打开,同时获取地图视野的中心点
|
||||||
|
infoWindowOpen(param) {
|
||||||
|
// bm-info-window 暂时不用
|
||||||
|
console.log(param)
|
||||||
|
param.show = true
|
||||||
|
param.animal = "BMAP_ANIMATION_BOUNCE"
|
||||||
|
this.center.lat = param.position.lat;
|
||||||
|
this.center.lng = param.position.lng;
|
||||||
|
},
|
||||||
|
//上下文菜单跳转
|
||||||
|
gotochengdu (e) {
|
||||||
|
this.center = {
|
||||||
|
// 103.943382, lat: 30.750594
|
||||||
|
lng: 103.943382,
|
||||||
|
lat:30.750594
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gotoshenzhen (e) {
|
||||||
|
this.center = {
|
||||||
|
// 114.036331, lat: 22.730421
|
||||||
|
lng: 114.036331,
|
||||||
|
lat: 22.730421
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//鼠标缩放触发函数
|
||||||
|
mouseEvent(type, target) {
|
||||||
|
//14 大于 14 显示 小于14 隐藏
|
||||||
|
if (type.currentTarget.Oa > 14) {
|
||||||
|
this.lableOpen = true;
|
||||||
|
} else {
|
||||||
|
this.lableOpen = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.BMap_pop {
|
</script>
|
||||||
|
|
||||||
> div,
|
<style scoped>
|
||||||
> img:nth-child(10) {
|
/*调试信息窗格的样式*/
|
||||||
|
/*地图标题 infoWindow*/
|
||||||
|
/deep/ .BMap_bubble_title{
|
||||||
|
color:#fff;
|
||||||
|
font-size:18px;
|
||||||
|
/*font-weight: bold;*/
|
||||||
|
text-align:left;
|
||||||
|
background:transparent !important;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bottom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/*去除四个角的方块*/
|
||||||
|
/deep/ .BMap_pop div:nth-child(1){
|
||||||
|
border-radius:7px 0 0 0;
|
||||||
|
background:transparent !important;
|
||||||
|
border:0 !important;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_pop > div, > img:nth-child(10) {
|
||||||
display: none;
|
display: none;
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_pop > div:nth-child(9) {
|
||||||
> div:nth-child(9) {
|
|
||||||
display: block;
|
display: block;
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
width: 340px !important;
|
width: 340px !important;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_pop > div:nth-child(8) {
|
||||||
> div:nth-child(8) {
|
|
||||||
/*display: block;*/
|
/*display: block;*/
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_pop .BMap_top{
|
||||||
.BMap_top {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_pop .BMap_center{
|
||||||
.BMap_center {
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
position: sticky !important;
|
position: sticky !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_bubble_content {
|
||||||
}
|
|
||||||
.BMap_bubble_content {
|
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, .5);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
}
|
||||||
.info-window {
|
/deep/ .BMap_bubble_content .info-window{
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 280px;
|
max-height: 280px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
}
|
||||||
.el-divider {
|
/deep/ .BMap_bubble_content .info-window .el-divider{
|
||||||
background: #ccccccbf;
|
background: #ccccccbf;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window .address{
|
||||||
.address {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
|
||||||
|
/deep/ .BMap_pop div:nth-child(8) {
|
||||||
|
background-color: rgb(255, 255, 255, 0) !important;
|
||||||
|
/*color: white !important;*/
|
||||||
|
/*!/设置透明度*!*!*/
|
||||||
|
/*opacity: 0.6;*/
|
||||||
}
|
}
|
||||||
/*//自定义滚动条样式*/
|
/*自定义滚动条*/
|
||||||
.info-window::-webkit-scrollbar {
|
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
|
||||||
.info-window::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||||
background: #535353;
|
background: #535353;
|
||||||
}
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
|
||||||
.info-window::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #EDEDED;
|
background: #EDEDED;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*修改地图信息窗口对象样式*/
|
||||||
|
.contain{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.complete {
|
||||||
|
width: 210px;
|
||||||
|
margin-right:15px
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
/*height: 750px;*/
|
||||||
|
/*height: 850px;*/
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
去除百度地图版权
|
||||||
|
去除右上角[地图、卫星、三维]控件
|
||||||
|
去除百度地图右上角平移缩放控件的市县区文字
|
||||||
|
*/
|
||||||
|
.map >>> .anchorBL,
|
||||||
|
/*.map >>> .anchorTR,*/
|
||||||
|
.map >>> .BMap_zlHolder {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.conditions-div >>> .el-form-item {
|
||||||
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,73 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
|
||||||
<!-- <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
|
|
||||||
<!-- <iframe :src="this.txtUrl" width="100%" :style="{height:calHeight}" sandbox></iframe>-->
|
|
||||||
<!-- <iframe src="../../../../public/index.html" width="100%" :style="{height:calHeight}" ></iframe>-->
|
|
||||||
<!-- <iframe src="http://www.baidu.com/" width="100%" :style="{height:calHeight}" ></iframe>-->
|
|
||||||
<!-- 摄像头分布图 -->
|
|
||||||
<!-- 观澜：lng: 114.036331, lat: 22.730421 -->
|
|
||||||
<!-- 成都lng: 103.943382, lat: 30.750594-->
|
|
||||||
|
|
||||||
<div class="contain">
|
<div class="contain">
|
||||||
<baidu-map
|
<baidu-map
|
||||||
class="map"
|
class="map"
|
||||||
:scroll-wheel-zoom="true"
|
:scroll-wheel-zoom="true"
|
||||||
:double-click-zoom="false"
|
:double-click-zoom="false"
|
||||||
@zoomend="mouseEvent"
|
|
||||||
:center="center"
|
:center="center"
|
||||||
:zoom="zoom">
|
:zoom="zoom">
|
||||||
<!-- 跳转菜单-->
|
|
||||||
<bm-context-menu width="250">
|
|
||||||
<bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
|
|
||||||
<bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
|
|
||||||
</bm-context-menu>
|
|
||||||
<!-- 地图类型切换-->
|
<!-- 地图类型切换-->
|
||||||
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
|
<bm-map-type :map-types="['BMAP_NORMAL_MAP','BMAP_PERSPECTIVE_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
|
||||||
<!--右下角缩略图-->
|
<div >
|
||||||
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
|
<bm-marker :position="{lng: item.position.lng,lat: item.position.lat}" >
|
||||||
|
<bm-info-window :show="true" class="bminfowindow" >
|
||||||
|
<div style="color:#fff;font-size:16px;">
|
||||||
|
<div style="width:220px;font-size: 20px">摄像头数据</div>
|
||||||
|
<div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
|
||||||
|
|
||||||
<!--缩放控件-->
|
<div style="margin-top:10px;width:220px"> 异常区域：</div>
|
||||||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
<div style="margin-top:5px;width:220px"> 详细地址：</div>
|
||||||
<bm-marker :title="item.content"
|
<div style="margin-top:5px;width:220px"> 严重程度：</div>
|
||||||
:icon="iconUrl"
|
<div style="margin-top:5px;width:220px"> 上报人：</div>
|
||||||
:position="item.position"
|
<div style="margin-top:5px;width:220px"> 联系方式：</div>
|
||||||
:dragging="true"
|
<div style="margin-top:5px;width:220px"> 指派人：</div>
|
||||||
@click="infoWindowOpen(item)">
|
<div style="margin-top:5px;width:220px"> 故障开始时间：</div>
|
||||||
<!-- 搜索框 -->
|
<div style="margin-top:5px;width:220px"> 详细信息：</div>
|
||||||
<bm-control :offset="{width: '10px', height: '10px'}">
|
</div>
|
||||||
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
|
|
||||||
<el-input class="complete" v-model="keyword"></el-input>
|
|
||||||
</bm-auto-complete>
|
|
||||||
<el-button type="primary" @click="search">搜索</el-button>
|
|
||||||
</bm-control>
|
|
||||||
<!-- 信息窗体-->
|
|
||||||
<bm-info-window :show="item.show" @close="infoWindowClose(item)">
|
|
||||||
<!-- <p v-text="item.content"></p>-->
|
|
||||||
<p>经度：{{item.position.lat}}</p>
|
|
||||||
<p>纬度：{{item.position.lng}}</p>
|
|
||||||
<img :src="iconUrl.url" style="width:100%" />
|
|
||||||
</bm-info-window>
|
</bm-info-window>
|
||||||
</bm-marker>
|
</bm-marker>
|
||||||
<bm-marker :title="item.content" :icon="iconUrl" :position="{lng: 103.943382, lat: 30.750594}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
|
</div>
|
||||||
<!--聚合动态添加的点坐标-->
|
|
||||||
<bm-marker
|
|
||||||
:icon="iconUrl"
|
|
||||||
v-for="(item,key ) of this.mapList"
|
|
||||||
:key="key"
|
|
||||||
:position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
|
|
||||||
@rightclick="rightmons(item.idFaceCamera)"
|
|
||||||
:dragging="false"
|
|
||||||
>
|
|
||||||
<bm-label
|
|
||||||
:massClear="false"
|
|
||||||
@dblclick="deletePoint(item)"
|
|
||||||
v-if="lableOpen"
|
|
||||||
:content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
|
|
||||||
:labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
|
|
||||||
:offset="{width: -100, height: -90}"
|
|
||||||
/>
|
|
||||||
</bm-marker>
|
|
||||||
</baidu-map>
|
</baidu-map>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -84,6 +43,13 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
//信息窗口数据导入
|
||||||
|
Informationwindowdata: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
keyword: '',
|
keyword: '',
|
||||||
item:{
|
item:{
|
||||||
position: { lng: 103.931057, lat: 30.755467 },
|
position: { lng: 103.931057, lat: 30.755467 },
|
||||||
@ -92,7 +58,7 @@ export default {
|
|||||||
},
|
},
|
||||||
content:"shexiangtou",
|
content:"shexiangtou",
|
||||||
lableOpen: false,
|
lableOpen: false,
|
||||||
zoom:14,
|
zoom:18,
|
||||||
center: {
|
center: {
|
||||||
lng: 103.931057, lat: 30.755467
|
lng: 103.931057, lat: 30.755467
|
||||||
},
|
},
|
||||||
@ -141,6 +107,11 @@ export default {
|
|||||||
//逆地址解析
|
//逆地址解析
|
||||||
search() {
|
search() {
|
||||||
this.item.show = true
|
this.item.show = true
|
||||||
|
for (let i = 0; i <this.mapList.length ; i++) {
|
||||||
|
if (this.mapList[i].name == this.keyword ){
|
||||||
|
//到摄像头列表中搜索，将信息窗体显示出来
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
|
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
|
||||||
infoWindowClose(param) {
|
infoWindowClose(param) {
|
||||||
@ -245,6 +216,84 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/*地图标题 infoWindow*/
|
||||||
|
/deep/ .BMap_bubble_title{
|
||||||
|
color:#fff;
|
||||||
|
font-size:18px;
|
||||||
|
/*font-weight: bold;*/
|
||||||
|
text-align:left;
|
||||||
|
background:transparent !important;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bottom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/*去除四个角的方块*/
|
||||||
|
/deep/ .BMap_pop div:nth-child(1){
|
||||||
|
border-radius:7px 0 0 0;
|
||||||
|
background:transparent !important;
|
||||||
|
border:0 !important;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_pop > div, > img:nth-child(10) {
|
||||||
|
display: none;
|
||||||
|
overflow: unset;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_pop > div:nth-child(9) {
|
||||||
|
display: block;
|
||||||
|
overflow: unset;
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_pop > div:nth-child(8) {
|
||||||
|
/*display: block;*/
|
||||||
|
}
|
||||||
|
/deep/ .BMap_pop .BMap_top{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_pop .BMap_center{
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
position: sticky !important;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bubble_content {
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window{
|
||||||
|
padding-right: 8px;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 280px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window .el-divider{
|
||||||
|
background: #ccccccbf;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window .address{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
|
||||||
|
/*/deep/ .BMap_pop div:nth-child(8) {*/
|
||||||
|
/* background-color: rgb(255, 255, 255, 0) !important;*/
|
||||||
|
/* !*color: rgb(0, 220, 255) !important;*!*/
|
||||||
|
/* !/设置透明度*!*!*/
|
||||||
|
/* !*opacity: 0.6;*!*/
|
||||||
|
/*}*/
|
||||||
|
/*自定义滚动条*/
|
||||||
|
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
|
||||||
|
width: 6px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
|
||||||
|
border-radius: 6px;
|
||||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||||
|
background: #535353;
|
||||||
|
}
|
||||||
|
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
|
||||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #EDEDED;
|
||||||
|
}
|
||||||
|
/*修改地图信息窗口对象样式*/
|
||||||
.contain{
|
.contain{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -265,7 +314,7 @@ export default {
|
|||||||
去除百度地图右上角平移缩放控件的市县区文字
|
去除百度地图右上角平移缩放控件的市县区文字
|
||||||
*/
|
*/
|
||||||
.map >>> .anchorBL,
|
.map >>> .anchorBL,
|
||||||
.map >>> .anchorTR,
|
/*.map >>> .anchorTR,*/
|
||||||
.map >>> .BMap_zlHolder {
|
.map >>> .BMap_zlHolder {
|
||||||
display: none;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
@ -273,4 +322,5 @@ export default {
|
|||||||
.conditions-div >>> .el-form-item {
|
.conditions-div >>> .el-form-item {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user