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>