BJ_web_developers / wxgzh

  <template>
    <div class="" style="width: 100%;height: 100%">
      <div class="search">
        <div class="psearch" @click="$router.push({name:'search'})">
          <div>
            <div></div>
          </div>
          <div>
            <span id="searchName">搜索</span>
          </div>
        </div>
      </div>
  
      <div class="parkList" @click="toParkList">
        <div class="iconlist icon iconfont">&#xe69f;</div>
        列表
      </div>
  
      <baidu-map class="map" :center="center"
                 @ready="handler"
                 :zoom="16">
  
  

        <bm-label  :content="labelContent" :position="{lng: position.longitude, lat: position.latitude}" :labelStyle="{color: '#FFF', fontSize : '16px',background:position.bgcolor,borderRadius: '50%',padding:'3px',borderColor:'#fff'}" title="Hover me"/>

  
      </baidu-map>
  
      <div class="onepark" v-show="parkShow" @click="gaodec">
        <div class="neir">
          <div class="leftinfo">
            <div class="lname">
              <span class="bg00f" v-if="this.oneparkObject.idleberths>10" style="background: #0f0">充足</span>
              <span class="bg00f" v-else-if="this.oneparkObject.idleberths>0&&this.oneparkObject.idleberths<10"
                    style="background: #ff9e04">紧张</span>
              <span class="bg00f"
                    v-else-if="this.oneparkObject.idleberths==0&&this.oneparkObject.totalberths&&this.oneparkObject.totalberths!=0&&this.oneparkObject.totalberths!='0'"
                    style="background: #f00">停满</span>
              <span class="bg00f" v-else style="background: #0f0">充足</span>
  
  
              <span id="parkname">{{ oneparkObject.name }}</span>
            </div>
            <div class="lnum">
              当前车位：<span class="font00f" id="kongnum">{{ oneparkObject.idleberths }}</span>/<span id="allnum">{{ oneparkObject.totalberths }}</span>
            </div>
            <div class="ladres">
              <span id="laddre">{{ oneparkObject.address }}</span>&nbsp;&nbsp;
              <span id="distace" class="font0f0">距离您{{ dis }}km</span>
            </div>
          </div>
          <div class="rightinfo">
            <div><i class="icon iconfont">&#xe6ce;</i></div>
            <div>导航</div>
          </div>
        </div>
      </div>
  
      <popComponents
        :latitude="latitude"
        :longitude="longitude"
        :popupFlag="popupVisible" :parkName="name" :idleberths="idleberths"  :juli="julis" :num="n">
  
      </popComponents>
  
    </div>
  
  </template>
  
  <script>
  
  
  import popComponents from './popComponents.vue'
  import {queryParkingLots} from '@/api/map/map.js'
  
  export default {
    components:{
      popComponents
    },
    data() {
      return {
        center: {},  // 定位中心点
        // zoom: 3
        parkShow: false,  //  搜索完毕下方展示
        oneparkObject: {}, // 下方展示数据对象
        dis:'',  //  两点之间距离计算
        popupVisible: false,
        n:10,
        setTimeoutTimer:'',

        latitude:'39.91092455',
        longitude:'116.41338370',

        name:'',
        idleberths:'',

        julis:'',
        labelShow: false,
        labelContent:'',
        position:{
          latitude:'39.91092455',
          longitude:'116.41338370',
          bgcolor: '#f00'
        }

      }
    },
    methods: {
      handler: function ({ BMap, map }) {
        map.enableScrollWheelZoom(true); //开启滚轮缩放
        // map.centerAndZoom('青岛市', 13)
        const hide = console.log("正在获取当前省市请稍候..", 0);
        const _this = this;
        const geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(
          function (r) {
            setTimeout(hide, 1000);
            console.log(r);
            // 存储获取的中心点
            let zbCenter = {
              lng: r.longitude,
              lat: r.latitude
            }
            localStorage.setItem('zbcenter', JSON.stringify(zbCenter))
  
            if (_this.$route.query.name) {  //  搜索完毕走这
              console.log('1')
              _this.center = { lng: _this.$route.query.lng, lat: _this.$route.query.lat }; // 设置center属性值
              _this.queryParkingLots(_this.$route.query.lng, _this.$route.query.lat)
            } else { //  第一次进入地图走这
              console.log('2')
              _this.center = { lng: r.longitude, lat: r.latitude }; // 设置center属性值
            }
  
            // _this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }        // 自定义覆盖物
            _this.initLocation = true;
          },
  
          { enableHighAccuracy: true }
        );
        window.map = map;
        // 赋值，方便调用，本节被用到
        this.BMap = BMap;
        this.map = map;
      },
      //   获取下方数据
      queryParkingLots: function (lon, lat) {
        var salt = this.$utils.myCommonSalt(32);
        var jsondata = {
          app_id: this.$utils.myVarAppid,
          deviceInfo: this.$utils.myDeviceInfo,
          latitude: lat,
          longitude: lon,
          salt: salt,
          sign_type: 'md5',
          type: '01',
          limit: '2000',
          isShowOther: '0'
        }
        jsondata.sign = this.$utils.signObject(jsondata)
        queryParkingLots(jsondata).then(response => {
          console.log(response.data[0])
          let datas = response.data[0]
          let center = JSON.parse(localStorage.getItem('zbcenter'))
          this.dis = this.GetDistance(center.lat,center.lng,response.data[0].latitude,response.data[0].longitude)
          console.log(this.dis)
          this.oneparkObject = response.data[0]
          this.parkShow = true
          this.name = datas.name
  
          this.latitude = datas.latitude
          this.longitude = datas.longitude

          this.position.latitude = datas.latitude
          this.position.longitude = datas.longitude

          this.idleberths = datas.idleberths

          this.labelContent = datas.idleberths
          if(datas.idleberths>10){
            this.position.bgcolor = '#0f0'
          }else if(datas.idleberths<=10&&datas.idleberths>0){
            this.position.bgcolor = '#ff9e04'
          }else if(datas.idleberths<=0){
            this.position.bgcolor = '#f00'
          }else{
            this.position.bgcolor = '#0f0'
          }
  
  
  
  
  

          this.julis = this.dis
        })
      },
  
      // 百度地图开发，计算两个点间直线距离js方法（忽略坐标系误差，同样适用于其他地图）
      Rad: function (d) {
        return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
      },
      //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
      GetDistance: function (lat1, lng1, lat2, lng2) {
        var radLat1 = this.Rad(lat1);
        var radLat2 = this.Rad(lat2);
        var a = radLat1 - radLat2;
        var b = this.Rad(lng1) - this.Rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137; // 地球半径，千米;
        s = Math.round(s * 100) / 100; //输出为公里
        // s = Math.round(s * 1000) / 1; //单位修改为米,取整
        //s=s.toFixed(4);
        return s;
      },
  
      // 前往车场列表
      toParkList: function () {
        let me = this
        this.$router.push({
          name: 'parkList',
          query: me.center
        })
      },
      gaodec: function () {
        this.popupVisible = true
        let me = this
        this.n = 10
        this.setTimeoutTimer = setInterval(function () {
          if(me.n == 0){
            window.location.href = "http://api.map.baidu.com/marker?location="+this.latitude+","+this.longitude+"&title=目标地址&content="+this.name+"&output=html&src=webapp.baidu.openAPIdemo"
            return
          }
          me.n --
          console.log(me.n)
        },1000)
      },
    }
  }
  </script>
  
  <style scoped lang="scss">
    .parkList {
      position: absolute;
      right: 10%;
      top: 80px;
      padding: 3px 8px;
      background: #fff;
      border: 1px solid #000;
      cursor: pointer;
      z-index: 887;
      text-align: center;
    }
  
    .search {
      position: absolute;
      width: 100%;
      padding: 0 10%;
      top: 15px;
      box-sizing: border-box;
      z-index: 887;
      height: 40px;
    }
  
    .search .psearch {
      background: #fff;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
    }
  
    .search .psearch > div {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      color: #C0C0C0;
    }
  
    .search .psearch > div:first-child {
      width: 87%;
      padding-left: 10px;
      box-sizing: border-box;
    }
  
    .search .psearch > div:first-child > div {
      height: 40px;
      background: #C0C0C0;
      width: 1px;
      float: right;
    }
  
    .search .psearch > div:last-child {
      width: 13%;
      text-align: center;
    }
  
    .map {
      width: 100%;
      height: 100%;
    }
  
    .onepark {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 887;
      padding: 8px 10px;
      box-sizing: border-box;
  
    }
  
    .neir {
      width: 100%;
      background: #0D9BF2;
      /*border-radius: 5px;*/
      border: 1px solid #9B9B9B;
      display: table;
      background: #307ff5;
    }
  
    .neir > div {
      display: inline-block;
      height: 100px;
      padding: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      vertical-align: middle;
      display: table-cell;
    }
  
    .neir > div.leftinfo {
      background: #fff;
      width: 80%;
    }
  
    .neir > div.rightinfo {
      width: 20%;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
  
    .neir > div.rightinfo i {
      font-size: 30px;
      color: #fff;
    }
  
    .leftinfo .bg00f {
      background: #00ff00;
      color: #fff;
      border-radius: 3px;
      font-size: 12px;
      padding: 3px 5px;
    }
  
    .leftinfo .font00f {
      color: #0f0;
    }
  
    .leftinfo .ladres .font0f0 {
      color: #00f;
    }
  </style>