VMap.vue
4.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
<div class="map-wrap" id="map"></div>
</template>
<script>
import busyCar from '../images/content/busy-status.png'; //以import的方式导入图片文件
import normalCar from '../images/content/normal-status.png'; //以import的方式导入图片文件
import idleCar from '../images/content/idle-status.png'; //以import的方式导入图片文件
export default {
name: 'VMap',
mounted(){
this.drawMap()
},
methods:{
drawMap(){
let data = [
{Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
{Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
{Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
];
var map = new BMap.Map('map', {enableMapClick: false})
var point = new BMap.Point(data[0].lonId, data[0].latId)
map.centerAndZoom(point, 15)
var mapStyle={ style : "midnight" }
map.enableScrollWheelZoom(false);
map.setMapStyle(mapStyle);
// var marker = new BMap.Marker(point) // 创建标注
// map.addOverlay(marker) // 将标注添加到地图中
map.clearOverlays();
var i = 0;
var points = [];
for (var item in data) {
(function (x) {
var itemthat = item;
//创建标注
var pt = new BMap.Point(data[item].lonId, data[item].latId);
points[i] = pt;
if(data[item].freeBrethNum/data[item].plBerthNum == 0){
var myIcon = new BMap.Icon(idleCar,
new BMap.Size(29, 40), {
offset: new BMap.Size(10, 40),
textColor: '#fff'
});
var marker = new BMap.Marker(pt,{icon:myIcon});
} else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
var myIcon = new BMap.Icon(normalCar,
new BMap.Size(29, 40), {
offset: new BMap.Size(10, 40),
textColor: '#fff'
});
var marker = new BMap.Marker(pt,{icon:myIcon});
} else {
var myIcon = new BMap.Icon(busyCar,
new BMap.Size(29, 40), {
offset: new BMap.Size(10, 40),
textColor: '#fff'
});
var marker = new BMap.Marker(pt,{icon:myIcon});
}
var myIcon = new BMap.Icon(busyCar,
new BMap.Size(29, 40), {
offset: new BMap.Size(10, 40),
textColor: '#fff'
});
marker.setTop(true,27000000);
map.addOverlay(marker);
var myLabel;
map.removeOverlay(myLabel);
// map.removeOverlay(myLabel);
myLabel = new BMap.Label(
`<div class="dialog-wrap">
<div class="dialog-header" title="${data[item].plAddress}">${data[item].plName}</div>
<div class="dialog-address" title="${data[item].plAddress}">${data[item].plAddress}</div>
<ul class="dislog-body">
<li><div>${data[item].freeBrethNum}</div><div>空闲</div></li>
<li></li>
<li><div>${data[item].plBerthNum}</div><div>总数</div></li>
</ul>
<div class="dislog-footer">停车场收入:1293847.00元</div>
<div class="dislog-footer">停车场收入:1293847.00元</div>
</div>`,
{
offset: new BMap.Size(-225, -55), //label的偏移量，为了让label的中心显示在点上
position: pt
});
myLabel.setStyle({
// color: "#0f0",
// fontSize: "12px",
padding: "0",
// whiteSpace: "normal",
backgroundColor: "",
border: "0px",
zIndex: "1000"
}
);
marker.setLabel(myLabel)
marker.setTop(true,27000000);
i++;
})(i);
}
}
}
}
</script>
<style scoped lang="scss">
.map-wrap{
width: 100%;
height: 100%;
}
</style>