BJ_web_developers / lzsandtable

Blame view

src/components/VMap.vue 4.32 KB
Edit Raw Normal View History
1e4db980   liuqimichale   轮廓 
1
 
  <template>
f1105655   liuqimichale   map 
2
 
      <div class="map-wrap" id="map"></div>
1e4db980   liuqimichale   轮廓 
3
4
5
 
  </template>
  
  <script>
f1105655   liuqimichale   map 
6
7
8
9
 
  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的方式导入图片文件
1e4db980   liuqimichale   轮廓 
10
 
  export default {
f1105655   liuqimichale   map 
11
12
13
14
15
16
17
 
    name: 'VMap',
    mounted(){
      this.drawMap()
    },
    methods:{
      drawMap(){
        let data =  [
5b095e2d   liuqimichale   地图 
18
19
20
 
            {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'}
f1105655   liuqimichale   map 
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
          ];
        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){
5b095e2d   liuqimichale   地图 
41
 
              var myIcon = new BMap.Icon(idleCar,
f1105655   liuqimichale   map 
42
43
44
45
46
47
48
49
50
51
52
53
54
 
                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 {
5b095e2d   liuqimichale   地图 
55
 
              var myIcon = new BMap.Icon(busyCar,
f1105655   liuqimichale   map 
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
                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;
5b095e2d   liuqimichale   地图 
71
 
            map.removeOverlay(myLabel);
f1105655   liuqimichale   map 
72
5b095e2d   liuqimichale   地图 
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
 
            // 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"
f1105655   liuqimichale   map 
98
 
              }
5b095e2d   liuqimichale   地图 
99
100
101
 
            );
            marker.setLabel(myLabel)
            marker.setTop(true,27000000);
f1105655   liuqimichale   map 
102
103
104
105
106
107
108
109
 
            i++;
          })(i);
        }
  
      }
  
    }
1e4db980   liuqimichale   轮廓 
110
111
112
113
 
  }
  </script>
  
  <style scoped lang="scss">
f1105655   liuqimichale   map 
114
115
116
117
 
      .map-wrap{
          width: 100%;
          height: 100%;
      }
5b095e2d   liuqimichale   地图 
118
119
1e4db980   liuqimichale   轮廓 
120
 
  </style>