bike-alipay/pages/parking/parking.js

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var app = getApp();
var qqmapsdk = new QQMapWX({
  key: app.globalData.mapKey // 必填
});
Page({
  data: {
    longitude: '',
    latitude: '',
    suggestion:[],
    show:false,
    value:'',
    parking:false,
    controls:[],
    animationData:{},
    address:'',
    area:[],
    polygons:[],
    areaTop:[],
    home_polygons: [],
    markers:[],
    img:app.globalData.imgUrl
  },
  onLoad: function(options) {
    var that = this;
    my.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log('经纬度为：+++++++++++++++++++++' + res.latitude + '++++++++' + res.longitude)
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          longitude: longitude,
          latitude: latitude
        })
      },
      fail: function(err) {
        console.log(err)
      }
    })
    if(!my.getStorageSync({'key':'home'}).data){
    my.showToast({
        content: '附近暂无运营区',
        icon: 'none'
      })
    }else{
    that.setData({ home_polygons: my.getStorageSync({'key':'home'}).data, polygons: that.data.polygons.concat(my.getStorageSync({'key':'home'}).data)})
    var data = {
      'area_id': my.getStorageSync({'key':'home'}).data.id
    }
    app.request('/parking/stop-sites', data, 'GET').then(res => {
      // console.log(res)
      if (res.status == 200) {
        var data = res.data
        that.setData({
          polygons: that.data.polygons.concat(data.polygons),
          markers: data.centres
        })
        console.log(that.data.polygons)
      }
    })
    }
  },
  parkingArea:function(){
    var that = this;
    my.getLocation({
      type: 'gcj02',
      success: function(resp) {
        var data = {
          'lat': that.data.latitude,
          'lng': that.data.longitude,
          'area_id': my.getStorageSync({'key':'home'}).data.id,
          'location_lat':resp.latitude,
          'location_lng':resp.longitude
        }
        var markers = that.data.markers;
        app.request('/parking/nearby', data, 'GET').then(res => {
          console.log(res)
          if(res.data.points!=''){
            that.setData({area:res.data.points,areaTop:res.data.points[0]})
          }
          if (res.status == 200) {
            var data1 = res.data
            if(data1.polygons.length>0){
              var array = data1.points;
              var marker = {};
              marker.latitude = that.data.latitude;
              marker.longitude = that.data.longitude;
              marker.zIndex = 1111;
              marker.width = 15;
              marker.height = 27;
              marker.type = 3;
              marker.iconPath = '/img/map.png';
              array = array.concat(marker)
              that.setData({ polygons: that.data.polygons.concat(data1.polygons), markers: markers.concat(array), parking:true})
              console.log(that.data.polygons)
              console.log(that.data.markers)
            }else{
              my.showToast({
                content: '当前目的地附近暂无还车点',
                icon:'none'
              })
              that.setData({ parking:false})
              var marker = {};
              marker.latitude = that.data.latitude;
              marker.longitude = that.data.longitude;
              marker.zIndex = 1111;
              marker.width = 15;
              marker.height = 27;
              marker.type = 3;
              marker.iconPath = '/img/map.png';
              that.setData({ markers: markers.concat(marker) })
            }
          }else{
            var marker = {};
            marker.latitude = that.data.latitude;
            marker.longitude = that.data.longitude;
            marker.zIndex = 1111;
            marker.width = 15;
              marker.height = 27;
              marker.type = 3;
              marker.iconPath = '/img/map.png';
            that.setData({ markers: markers.concat(marker) })
          }
        })
      },
    })
  },
  stop(e){
    var that = this;
    var area = this.data.area;
    var markers = that.data.markers;
    for (let item of markers) {
      // console.log(item)
      if (item.id == e.markerId) {
        if(item.type==2){
          item.iconPath = 'http://resource.bike.hanyiyun.com/weapp/orange-stop.png'
        }
        if (item.type == 1) {
          item.iconPath = 'http://resource.bike.hanyiyun.com/weapp/ban-stop.png'
        }
      } else {
        if(item.type==2){
          if (item.iconPath == '/img/map.png') {
          } else {
            item.iconPath = 'http://resource.bike.hanyiyun.com/weapp/stop1.png'
          }
        }
        if (item.type == 1) {
          item.iconPath = 'http://resource.bike.hanyiyun.com/weapp/ban-stop.png'
        }
      }
    }
    that.setData({ markers })
    for (let item of area) {
      if (item.id == e.markerId) {
        if(item.type==2){
          that.setData({ areaTop: item })
        }
      }
    }
  },
  selected(e){
    var that = this;
    var city = that.data.suggestion;
    var index = e.currentTarget.dataset.index;
    that.setData({
      value:city[index].title,
      latitude: city[index].latitude,
      longitude:city[index].longitude,
      show:false,
      address: city[index].addr
    })
    // this.pointer();
    that.parkingArea()
    var animation = my.createAnimation({
      duration: 1000,//动画的持续时间
    })
    this.animation = animation; //将animation变量赋值给当前动画
    var time1 = setTimeout(function () {
      that.slideIn();//调用动画--滑入
      clearTimeout(time1);
      time1 = null;
    }, 100)
  },
  slideIn: function () {
    this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画
    this.setData({
      //动画实例的export方法导出动画数据传递给组件的animation属性
      animationData: this.animation.export()
    })
  },
  slideDown: function () {
    this.animation.translateY(300).step()
    this.setData({
      animationData: this.animation.export(),
    })
  },
  bindregionchange() {

  },
  location:function(e){
    console.log(this.data.areaTop)
    var latitude = this.data.areaTop.latitude;
    var longitude = this.data.areaTop.longitude;
    var address = this.data.areaTop.description;
    var name = this.data.areaTop.name;
    my.openLocation({//​使用支付宝内置地图查看位置。
      latitude: latitude,//要去的纬度-地址
      longitude: longitude,//要去的经度-地址
      name: name,
      address: address
    })
  },
  input(e) {
    var _this = this;
    //调用关键词提示接口
    if (e.detail.value == '') {
      _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
        suggestion: [],
        show:false,
        parking:false
      });
      return;
    }
    if (this.data.value != e.detail.value && e.detail.value!='') {
      // _this.setData({:false})
      var animation = my.createAnimation({
        duration: 1000,//动画的持续时间
      })
      this.animation = animation; //将animation变量赋值给当前动画
      var time1 = setTimeout(function () {
        _this.slideDown();//调用动画--滑入
        clearTimeout(time1);
        time1 = null;
      }, 100)
    }
    _this.setData({ value: e.detail.value })
    var location=_this.data.latitude+','+_this.data.longitude
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      page_size:20,
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      location:location,
      region_fix:1,
      success: function(res) { //搜索成功后的回调
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug,
          show:true
        });
      }
    });
  },
  onReady: function() {

  },
  onShow: function() {

  },
  onHide: function() {

  },
  onUnload: function() {

  },
  onPullDownRefresh: function() {

  },
  onReachBottom: function() {

  },
  onShareAppMessage: function() {
    
  }
})