BJ_web_developers / lzsandtable

  <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',

    props:['mapdata'],
    data(){
      return{
        map:'',

        mapdataarr:[]

      }
    },

    mounted(){

      console.log(this.mapdata)

      this.map = new BMap.Map('map', {enableMapClick: false})

  
    },
    watch:{
      // mapdata:function (newVal) {
      //   console.log(newVal)
      // }

      mapdata:  {
        handler(){
  
          this.mapdataarr = this.mapdata.data
          //let mapData = this.mapdataarr

          // 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

          console.log(this.mapdata.lonId)
          console.log(this.mapdata.latId)
          var point = new BMap.Point(this.mapdata.lonId, this.mapdata.latId)

          this.map.centerAndZoom(point, 22)
          var mapStyle={  style : "midnight" }
          this.map.enableScrollWheelZoom(false);
          this.map.setMapStyle(mapStyle);

          this.drawMap()

        },
        deep:true
  

      },

    },
    methods:{

      initMap(){
  
      },

      drawMap(){

        this.map.clearOverlays();

        var i = 0;
        var points = [];

        let mapData = this.mapdata.data

        var that = this

        for (var item in mapData) {

          (function (x) {
            var itemthat = item;
            //创建标注

            var pt = new BMap.Point(mapData[item].lonId, mapData[item].latId);

            points[i] = pt;

            if(mapData[item].freeBrethNum/mapData[item].plBerthNum == 0|mapData[item].freeBrethNum==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(mapData[item].freeBrethNum/mapData[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});
            }

  
            marker.setTop(true,27000000);

            // marker.addEventListener('click',function () {
            //   console.log(marker)
            //   var p = marker.getPosition();  //获取marker的位置
            //   alert("marker的位置是" + p.lng + "," + p.lat);
            // })

            that.map.addOverlay(marker);

            var myLabel;

            that.map.removeOverlay(myLabel);

            // map.removeOverlay(myLabel);
            myLabel = new BMap.Label(
              `<div class="dialog-wrap">

                    <div class="dialog-header" title="${mapData[item].plAddress}">${mapData[item].plName}</div>
                    <div class="dialog-address" title="${mapData[item].plAddress}">${mapData[item].plAddress}</div>

                    <ul class="dislog-body">

                      <li><div>${mapData[item].freeBrethNum}</div><div>空闲</div></li>

                      <li></li>

                      <li><div>${mapData[item].plBerthNum}</div><div>总数</div></li>

                    </ul>

                    <div class="dislog-footer">停车场收入:${mapData[item].income}元</div>
                    <div class="dislog-footer">停车场欠费:${mapData[item].arreageincome}元</div>

                  </div>`,
              {
                offset: new BMap.Size(-225, -55),   //label的偏移量，为了让label的中心显示在点上
                position: pt
              });
            myLabel.setStyle({

                padding: "0",

                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>