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(){

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

  
    },
    watch:{
      // mapdata:function (newVal) {
      //   console.log(newVal)
      // }
      mapdata: function () {
        this.$nextTick(()=>{

          this.mapdataarr = this.mapdata
          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(mapData[0].lonId)
          console.log(mapData[0].latId)
          var point = new BMap.Point(mapData[0].lonId, mapData[0].latId)
          this.map.centerAndZoom(point, 22)
          var mapStyle={  style : "midnight" }
          this.map.enableScrollWheelZoom(false);
          this.map.setMapStyle(mapStyle);
          // var marker = new BMap.Marker(point)  // 创建标注
          // map.addOverlay(marker)              // 将标注添加到地图中
  

          this.drawMap()
        })

      },

    },
    methods:{

      initMap(){
  
      },

      drawMap(){

  
  
        this.map.clearOverlays();

        var i = 0;
        var points = [];

        let mapData = this.mapdata
        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});
            }

            // var myIcon = new BMap.Icon(busyCar,
            //   new BMap.Size(29, 40), {
            //     offset: new BMap.Size(10, 40),
            //     textColor: '#fff'
            //   });

  
            marker.setTop(true,27000000);

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