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:'',
        //mapData:[]
      }
    },

    mounted(){

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

    },
    methods:{

      initMap(){
  
      },

      drawMap(){

        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)

        map.centerAndZoom(point, 22)

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

              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);
            map.addOverlay(marker);
            var myLabel;

            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>