Skip to content

M
mes-ui
Commit 84281cfc authored by 周远喜's avatar 周远喜
Browse files
Options

lid

parent d6c092cb
Hide whitespace changes
Inline Side-by-side
Showing with 1577 additions and 50 deletions
pages/demo/city.js 0 → 100644
View file @ 84281cfc
const citys = [{
"name": "北京",
"lng": 116.28,
"lat": 39.54,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "上海",
"lng": 121.29,
"lat": 31.14,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "天津",
"lng": 117.11,
"lat": 39.09,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "重庆",
"lng": 106.32,
"lat": 29.32,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "哈尔滨",
"lng": 126.41,
"lat": 45.45,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "长春",
"lng": 125.19,
"lat": 43.52,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "沈阳",
"lng": 123.24,
"lat": 41.5,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "呼和浩特",
"lng": 111.48,
"lat": 40.49,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "石家庄",
"lng": 114.28,
"lat": 38.02,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "太原",
"lng": 112.34,
"lat": 37.52,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "济南",
"lng": 117,
"lat": 36.38,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "郑州",
"lng": 113.42,
"lat": 34.48,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "西安",
"lng": 108.54,
"lat": 34.16,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "兰州",
"lng": 103.49,
"lat": 36.03,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "银川",
"lng": 106.16,
"lat": 38.2,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "西宁",
"lng": 101.45,
"lat": 36.38,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "乌鲁木齐",
"lng": 87.36,
"lat": 43.48,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "合肥",
"lng": 117.18,
"lat": 31.51,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "南京",
"lng": 118.5,
"lat": 32.02,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "杭州",
"lng": 120.09,
"lat": 30.14,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "长沙",
"lng": 113,
"lat": 28.11,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "南昌",
"lng": 115.52,
"lat": 28.41,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "武汉",
"lng": 114.21,
"lat": 30.37,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "成都",
"lng": 104.05,
"lat": 30.39,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "贵阳",
"lng": 106.42,
"lat": 26.35,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "福州",
"lng": 119.18,
"lat": 26.05,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "台北",
"lng": 121.31,
"lat": 25.03,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "广州",
"lng": 113.15,
"lat": 23.08,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "海口",
"lng": 110.2,
"lat": 20.02,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "南宁",
"lng": 108.2,
"lat": 22.48,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "昆明",
"lng": 102.41,
"lat": 25,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "拉萨",
"lng": 91.1,
"lat": 29.4,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}, {
"name": "香港",
"lng": 114.1,
"lat": 22.18,
"list": [{
"car": "CRH380A",
"count": 29
}, {
"car": "CRH381A",
"count": 9
}, {
"car": "CRH382A",
"count": 13
}, {
"car": "CRH384A",
"count": 19
}, {
"car": "CRH388A",
"count": 24
}]
}];
export default citys;
pages/demo/index.vue
View file @ 84281cfc
......@@ -108,39 +108,7 @@ import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
const citys = `北京,116.28,39.54
上海,121.29,31.14
天津,117.11,39.09
重庆,106.32,29.32
哈尔滨,126.41,45.45
长春,125.19,43.52
沈阳,123.24,41.50
呼和浩特,111.48,40.49
石家庄,114.28,38.02
太原,112.34,37.52
济南,117.,36.38
郑州,113.42,34.48
西安,108.54,34.16
兰州,103.49,36.03
银川,106.16,38.20
西宁,101.45,36.38
乌鲁木齐,87.36,43.48
合肥,117.18,31.51
南京,118.50,32.02
杭州,120.09,30.14
长沙,113.,28.11
南昌,115.52,28.41
武汉,114.21,30.37
成都,104.05,30.39
贵阳,106.42,26.35
福州,119.18,26.05
台北,121.31,25.03
广州,113.15,23.08
海口,110.20,20.02
南宁,108.20,22.48
昆明,102.41,25.0
拉萨,91.10,29.40
香港,114.10,22.18`;
import citys from "./city"
export default {
components: {
BaiduMap,
......@@ -279,26 +247,13 @@ export default {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
var arr = citys.split("\n");
arr.map(u => {
let v = u.split(",");
let p = {
name: v[0],
lng: parseFloat(v[1]),
lat: parseFloat(v[2]),
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
};
ps.push(p);
});
ps=citys;
}
this.markers = ps;
console.warn(JSON.stringify(ps))
},
infoWindowOpen(e) {
this.infoWindow.show = true;
......
pages/demo/lid/2.vue 0 → 100644
View file @ 84281cfc
<template>
<div class="bm-lid">
<div class="ad">
<div class="count">
<label>配属数量（列）</label>
<span>629</span>
</div>
<div class="count">
<label>停车股道</label>
<span>250</span>
</div>
<div class="count">
<label>停产库位</label>
<span>560</span>
</div>
<div class="count">
<label>维修股道</label>
<span>38</span>
</div>
<div class="count">
<label>维修库位</label>
<span>76</span>
</div>
</div>
<div class="legend"></div>
<div class="lab">
<p>图例</p>
<div class="item">
<div class="block" v-width="60"></div>
<div class="info fg">为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block dot" v-width="60"></div>
<div class="info fg">目前不为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center"
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
@click="hi"
>
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
<!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true">
<bm-marker
v-for="marker of markers"
:key="marker.code"
:position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)"
color="green"
></bm-marker>
</bm-marker-clusterer>
<bm-marker :position="marker" :dragging="true" @click="lookDetail(marker)"></bm-marker>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<bm-info-window
:position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}"
:title="infoWindow.info.name"
:show="infoWindow.show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
<div class="pop">
<h3>
{{infoWindow.info.name}}车管所
<a @click="infoWindowClose" class="fr mr5">
<Icon type="md-close" size="24" />
</a>
</h3>
<div class="content">
<ul>
<li v-for="li in infoWindow.info.list" :key="li.car">
{{li.car}}:
<span>{{li.count}}列</span>
</li>
</ul>
</div>
</div>
</bm-info-window>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BMapLib from 'BMapLib';
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import citys from '../city';
export default {
components: {
BaiduMap,
BmScale,
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow
},
data() {
return {
center: { lng: 0, lat: 0 },
marker: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
},
zoom: 1,
eye: false,
map: null,
infoBox: null,
my: {
styleJson: [
{
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff"
}
},
{
featureType: "tertiaryway",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "cityhighway",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "water",
elementType: "geometry",
stylers: {
color: "#4a90e2ff"
}
},
{
featureType: "districtlabel",
elementType: "labels",
stylers: {
visibility: "on"
}
},
{
featureType: "districtlabel",
elementType: "labels.icon",
stylers: {
visibility: "on"
}
},
{
featureType: "districtlabel",
elementType: "labels.text.stroke",
stylers: {
weight: 0,
color: "#ffffff00"
}
},
{
featureType: "districtlabel",
elementType: "labels.text.fill",
stylers: {
color: "#4a90e2ff",
weight: 10
}
},
{
featureType: "road",
elementType: "geometry",
stylers: {
visibility: "off"
}
}
]
},
map: null,
markers: [],
infoWindow: {
lng: 0,
lat: 0,
show: false,
info: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
}
}
};
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
this.center = "兰州";
this.zoom = 6;
map.disableDoubleClickZoom();
this.map = map;
window.map = map;
},
show() {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
ps=citys;
}
this.markers = ps;
},
infoWindowOpen(e) {
this.infoWindow.show = true;
},
infoWindowClose(e) {
this.infoWindow.show = false;
},
hi(e) {
// alert(1)
console.warn("EEE", e);
},
lookDetail(data, target) {
// console.log('data',data)
this.infoWindow.show = true;
this.infoWindow.info = data;
}
}
};
</script>
<style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8);
.bm-lid {
position: fixed;
width: 100%;
top: 100px;
left: 0;
right: 0;
height: calc(100vh - 100px);
.ad {
position: absolute;
width: 100%;
top: 40px;
text-align: center;
z-index: 3;
height: 60px;
color: white;
.count {
background: url("../../../assets/images/demo/bg.png");
width: 205px;
height: 55px;
display: inline-flex;
margin: 0 40px;
line-height: 55px;
label {
display: inline-block;
width: 120px;
font-size: 16px;
font-weight: bold;
text-align: right;
}
span {
display: inline-block;
width: 85px;
font-size: 32px;
font-weight: bold;
}
}
}
.legend {
position: absolute;
width: 200px;
height: 240px;
background: url("../../../assets/images/demo/legend.png") no-repeat center
rgba(0, 38, 77, 0.8);
bottom: 20px;
left: 10px;
z-index: 2;
border: 1px solid rgba(0, 38, 77, 1);
}
.eye {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
padding-top: 5px;
text-align: center;
right: 20px;
top: 20px;
background: #00264d;
border-radius: 8px;
z-index: 10;
a {
color: #ddd;
}
a:hover {
color: white;
}
}
.lab {
position: absolute;
z-index: 5;
width: 260px;
bottom: 20px;
background: @bgcolor;
border: 1px solid black;
right: 100px;
color: white;
padding: 10px 10px 0 10px;
>p{
font-size: 14px;
font-weight: bold;
line-height: 40px;
}
.item {
.block {
height: 40px;
width: 60px;
border: 1px solid #ddd;
float: left;
margin-right: 10px;
}
.dot{
border: 1px dotted #ddd;
}
.line{
border: 1px dashed #ddd;
}
.info {
padding-left: 20px;
flex-grow: 1;
}
height: 60px;
}
}
.map {
width: 100%;
height: 100%;
.BMap_cpyCtrl,
.anchorBL {
display: none;
}
.infoBoxContent {
background: red;
}
.BMap_pop {
.BMap_center {
// background: @bgcolor;
border-width: 0;
background: transparent;
}
.BMap_bottom {
// background: @bgcolor;
display: none;
}
.BMap_top {
display: none;
}
.BMap_bubble_title {
display: none;
}
img {
display: none;
}
div:nth-child(8),
div:nth-child(5) {
display: none;
}
> div:nth-child(1) {
display: none;
div {
display: none;
}
}
> div:nth-child(2) {
display: none;
}
> div:nth-child(3) {
display: none;
}
div:nth-child(7) {
display: none;
}
.pop {
color: white;
// padding: 0 0 20px 0;
// border: 1px solid #000;
border-radius: 8px;
background: #1e4b78;
h3 {
line-height: 50px;
background: #266099;
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
color: black;
}
a:hover {
color: white;
}
}
.content {
padding: 5px 15px;
li {
line-height: 30px;
font-size: 12px;
span {
float: right;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
pages/demo/lid/index.vue 0 → 100644
View file @ 84281cfc
<template>
<div class="bm-lid">
<div class="ad">
<div class="count">
<label>配属数量（列）</label>
<span>629</span>
</div>
<div class="count">
<label>停车股道</label>
<span>250</span>
</div>
<div class="count">
<label>停产库位</label>
<span>560</span>
</div>
<div class="count">
<label>维修股道</label>
<span>38</span>
</div>
<div class="count">
<label>维修库位</label>
<span>76</span>
</div>
</div>
<div class="legend"></div>
<div class="lab">
<p>图例</p>
<div class="item">
<div class="block" v-width="60"></div>
<div class="info fg">为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block dot" v-width="60"></div>
<div class="info fg">目前不为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center"
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
@click="hi"
>
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
<!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true">
<bm-marker
v-for="marker of markers"
:key="marker.code"
:position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)"
color="green"
></bm-marker>
</bm-marker-clusterer>
<bm-marker :position="marker" :dragging="true" @click="lookDetail(marker)"></bm-marker>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<bm-info-window
:position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}"
:title="infoWindow.info.name"
:show="infoWindow.show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
<div class="pop">
<h3>
{{infoWindow.info.name}}车管所
<a @click="infoWindowClose" class="fr mr5">
<Icon type="md-close" size="24" />
</a>
</h3>
<div class="content">
<ul>
<li v-for="li in infoWindow.info.list" :key="li.car">
{{li.car}}:
<span>{{li.count}}列</span>
</li>
</ul>
</div>
</div>
</bm-info-window>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BMapLib from 'BMapLib';
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import citys from '../city';
export default {
components: {
BaiduMap,
BmScale,
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow
},
data() {
return {
center: { lng: 0, lat: 0 },
marker: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
},
zoom: 1,
eye: false,
map: null,
infoBox: null,
my: {
styleJson: [
{
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff"
}
},
{
featureType: "tertiaryway",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "cityhighway",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "water",
elementType: "geometry",
stylers: {
color: "#4a90e2ff"
}
},
{
featureType: "districtlabel",
elementType: "labels",
stylers: {
visibility: "on"
}
},
{
featureType: "districtlabel",
elementType: "labels.icon",
stylers: {
visibility: "on"
}
},
{
featureType: "districtlabel",
elementType: "labels.text.stroke",
stylers: {
weight: 0,
color: "#ffffff00"
}
},
{
featureType: "districtlabel",
elementType: "labels.text.fill",
stylers: {
color: "#4a90e2ff",
weight: 10
}
},
{
featureType: "road",
elementType: "geometry",
stylers: {
visibility: "off"
}
}
]
},
map: null,
markers: [],
infoWindow: {
lng: 0,
lat: 0,
show: false,
info: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
}
}
};
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
this.center = "兰州";
this.zoom = 6;
map.disableDoubleClickZoom();
this.map = map;
window.map = map;
},
show() {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
ps=citys;
}
this.markers = ps;
},
infoWindowOpen(e) {
this.infoWindow.show = true;
},
infoWindowClose(e) {
this.infoWindow.show = false;
},
hi(e) {
// alert(1)
console.warn("EEE", e);
},
lookDetail(data, target) {
// console.log('data',data)
this.infoWindow.show = true;
this.infoWindow.info = data;
}
}
};
</script>
<style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8);
.bm-lid {
position: fixed;
width: 100%;
top: 100px;
left: 0;
right: 0;
height: calc(100vh - 100px);
.ad {
position: absolute;
width: 100%;
top: 40px;
text-align: center;
z-index: 3;
height: 60px;
color: white;
.count {
background: url("../../../assets/images/demo/bg.png");
width: 205px;
height: 55px;
display: inline-flex;
margin: 0 40px;
line-height: 55px;
label {
display: inline-block;
width: 120px;
font-size: 16px;
font-weight: bold;
text-align: right;
}
span {
display: inline-block;
width: 85px;
font-size: 32px;
font-weight: bold;
}
}
}
.legend {
position: absolute;
width: 200px;
height: 240px;
background: url("../../../assets/images/demo/legend.png") no-repeat center
rgba(0, 38, 77, 0.8);
bottom: 20px;
left: 10px;
z-index: 2;
border: 1px solid rgba(0, 38, 77, 1);
}
.eye {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
padding-top: 5px;
text-align: center;
right: 20px;
top: 20px;
background: #00264d;
border-radius: 8px;
z-index: 10;
a {
color: #ddd;
}
a:hover {
color: white;
}
}
.lab {
position: absolute;
z-index: 5;
width: 260px;
bottom: 20px;
background: @bgcolor;
border: 1px solid black;
right: 100px;
color: white;
padding: 10px 10px 0 10px;
>p{
font-size: 14px;
font-weight: bold;
line-height: 40px;
}
.item {
.block {
height: 40px;
width: 60px;
border: 1px solid #ddd;
float: left;
margin-right: 10px;
}
.dot{
border: 1px dotted #ddd;
}
.line{
border: 1px dashed #ddd;
}
.info {
padding-left: 20px;
flex-grow: 1;
}
height: 60px;
}
}
.map {
width: 100%;
height: 100%;
.BMap_cpyCtrl,
.anchorBL {
display: none;
}
.infoBoxContent {
background: red;
}
.BMap_pop {
.BMap_center {
// background: @bgcolor;
border-width: 0;
background: transparent;
}
.BMap_bottom {
// background: @bgcolor;
display: none;
}
.BMap_top {
display: none;
}
.BMap_bubble_title {
display: none;
}
img {
display: none;
}
div:nth-child(8),
div:nth-child(5) {
display: none;
}
> div:nth-child(1) {
display: none;
div {
display: none;
}
}
> div:nth-child(2) {
display: none;
}
> div:nth-child(3) {
display: none;
}
div:nth-child(7) {
display: none;
}
.pop {
color: white;
// padding: 0 0 20px 0;
// border: 1px solid #000;
border-radius: 8px;
background: #1e4b78;
h3 {
line-height: 50px;
background: #266099;
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
color: black;
}
a:hover {
color: white;
}
}
.content {
padding: 5px 15px;
li {
line-height: 30px;
font-size: 12px;
span {
float: right;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment