BJ_web_developers / lzsandtable

Blame view

src/components/VMap.vue 4.6 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
 
    name: 'VMap',
633692cc   liuqimichale   axios 
12
13
14
15
16
17
18
 
    props:['mapdata'],
    data(){
      return{
        map:'',
        //mapData:[]
      }
    },
f1105655   liuqimichale   map 
19
20
21
22
 
    mounted(){
      this.drawMap()
    },
    methods:{
633692cc   liuqimichale   axios 
23
24
25
 
      initMap(){
  
      },
f1105655   liuqimichale   map 
26
 
      drawMap(){
633692cc   liuqimichale   axios 
27
28
29
30
31
32
33
34
35
36
37
 
        let mapData = this.mapdata
        let map = this.map
        console.log(this.mapdata)
        // 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'}
        //   ];
        // let data = this.data
        map = new BMap.Map('map', {enableMapClick: false})
        var point = new BMap.Point(mapData[0].lonId, mapData[0].latId)
f1105655   liuqimichale   map 
38
39
40
41
42
43
44
45
46
47
 
        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 = [];
633692cc   liuqimichale   axios 
48
 
        for (var item in mapData) {
f1105655   liuqimichale   map 
49
50
51
 
          (function (x) {
            var itemthat = item;
            //创建标注
633692cc   liuqimichale   axios 
52
 
            var pt = new BMap.Point(mapData[item].lonId, mapData[item].latId);
f1105655   liuqimichale   map 
53
 
            points[i] = pt;
633692cc   liuqimichale   axios 
54
 
            if(mapData[item].freeBrethNum/mapData[item].plBerthNum == 0){
5b095e2d   liuqimichale   地图 
55
 
              var myIcon = new BMap.Icon(idleCar,
f1105655   liuqimichale   map 
56
57
58
59
60
 
                new BMap.Size(29, 40), {
                  offset: new BMap.Size(10, 40),
                  textColor: '#fff'
                });
              var marker = new BMap.Marker(pt,{icon:myIcon});
633692cc   liuqimichale   axios 
61
 
            } else if(mapData[item].freeBrethNum/mapData[item].plBerthNum <= 0.3){
f1105655   liuqimichale   map 
62
63
64
65
66
67
68
 
              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   地图 
69
 
              var myIcon = new BMap.Icon(busyCar,
f1105655   liuqimichale   map 
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
                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   地图 
85
 
            map.removeOverlay(myLabel);
f1105655   liuqimichale   map 
86
5b095e2d   liuqimichale   地图 
87
88
89
 
            // map.removeOverlay(myLabel);
            myLabel = new BMap.Label(
              `<div class="dialog-wrap">
633692cc   liuqimichale   axios 
90
91
 
                    <div class="dialog-header" title="${mapData[item].plAddress}">${mapData[item].plName}</div>
                    <div class="dialog-address" title="${mapData[item].plAddress}">${mapData[item].plAddress}</div>
5b095e2d   liuqimichale   地图 
92
 
                    <ul class="dislog-body">
633692cc   liuqimichale   axios 
93
 
                      <li><div>${mapData[item].freeBrethNum}</div><div>空闲</div></li>
5b095e2d   liuqimichale   地图 
94
 
                      <li></li>
633692cc   liuqimichale   axios 
95
 
                      <li><div>${mapData[item].plBerthNum}</div><div>总数</div></li>
5b095e2d   liuqimichale   地图 
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
                    </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 
112
 
              }
5b095e2d   liuqimichale   地图 
113
114
115
 
            );
            marker.setLabel(myLabel)
            marker.setTop(true,27000000);
f1105655   liuqimichale   map 
116
117
118
119
120
121
122
123
 
            i++;
          })(i);
        }
  
      }
  
    }
1e4db980   liuqimichale   轮廓 
124
125
126
127
 
  }
  </script>
  
  <style scoped lang="scss">
f1105655   liuqimichale   map 
128
129
130
131
 
      .map-wrap{
          width: 100%;
          height: 100%;
      }
5b095e2d   liuqimichale   地图 
132
133
1e4db980   liuqimichale   轮廓 
134
 
  </style>