jzmall_wx/pages/map/mapContent/mapContent.js

// pages/jsCase/citySel/index.js
const {
  cityData
} = require('./city.js')
var map = require('../../../utils/map.js');
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
Page({
  data: {
    index: 0,
    current_city: "当前定位",
    search: "",
    hot_city: [{
      name: "上海"
    }, {
      name: "北京"
    }, {
      name: "深圳"
    }, {
      name: "南京"
    }, {
      name: "苏州"
    }, {
      name: "杭州"
    }, {
      name: "青岛"
    }, {
      name: "广州"
    }, {
      name: "成都"
    }, {
      name: "重庆"
    }, {
      name: "昆山"
    }, {
      name: "武汉"
    }, {
      name: "西安"
    }, {
      name: "长沙"
    }],
    city_list: [],
    barHeight: 0,
    curr: -1,
    scrollViewId: "",
    barTop: 0,
    showLetter: true,
    result: [], //搜索结果
    mapShow: true,
    resultShow: false,
    cityShow: false,
    currentMarker: [
      // {longitude: 116.40159,
      // latitude: 39.90511,
      // title: '当前位置',}
    ],
    lng: '',
    lat: '',
    poiList: [],
    timer: '',
    loadTime: 0,
    isTouchMap: true


  },
  onUnload: function () {
    // 页面关闭
    clearInterval(this.data.timer);
  },
  onLoad: function (options) {
    // this.getUserLocation();
    let timer = setInterval(() => {
      if (this.data.loadTime < 10) {
        this.setData({
          loadTime: this.data.loadTime + 1
        });
      } else {

        clearInterval(that.data.timer);
      }

    }, 1000);
    this.setData({
      timer: timer
    });
    this.setData({

      city_list: cityData
    })
    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        let winHeight = res.windowHeight
        let barHeight = winHeight - res.windowWidth / 750 * 300;
        this.setData({
          barHeight: barHeight,
          barTop: res.windowWidth / 750 * 180,
        })
      }
    });
    this.mapCtx = wx.createMapContext("myMap");
    let that = this;
    console.log(options);
    if (options.lng && options.lat) {
      that.setData({
        addressName: options.addressname,
        current_city: options.city,
        lng: options.lng,
        lat: options.lat,
      });
      that.getPoiList();
    } else {

      // wx.authorize({
      //   scope: "scope.userLocation",
      //   success(res) {
      //     console.log("已允许授权定位权限: ", res);
      wx.getLocation({
        type: 'wgs84',
        success: function (res) {
          let latitude = res.latitude;
          let longitude = res.longitude;
          app.globalData.lat = latitude; //
          app.globalData.lng = longitude; //把onload定位时候的经纬度存到全局
          app.globalData.currentLocationName = res.city;
          app.globalData.city = res.city;


          that.setData({
            addressName: app.globalData.currentLocationName,
            current_city: app.globalData.city,
            lng: app.globalData.lng,
            lat: app.globalData.lat,
          });
          console.log('当前经纬度:' + longitude + ',' + latitude);
          that.getPoiList();
        },
        fail: function (res) {
          console.log('fail' + JSON.stringify(res));
        }
      });

      //   }
      // });
    }

  },

  onReady() {

  },
  getUserLocation: function () {
    map.getUserLocation();
    console.log(app.globalData);
    let that = this;
    setTimeout(() => {
      that.setData({
        addressName: app.globalData.currentLocationName,
        current_city: app.globalData.city,
        lng: app.globalData.lng,
        lat: app.globalData.lat,


      });
      this.getPoiList();
    }, 1000);
  },

  /**
   * 获取value值
   * @param {*} e 
   */
  getValue(e) {
    this.setData({
      search: e.detail.value
    }, () => {

      // this.search(e.detail.value);
    })
  },
  confSearch(e){
    this.search(this.data.search);
  },
  /**
   * 搜索成功
   */
  search(e) {
    // let result = [], { city_list } = this.data;
    // city_list.forEach((item1) => {
    //   item1.data.forEach((item2) => {
    //     if (item2.keyword.indexOf(e.toLocaleUpperCase()) !== -1) {
    //       result.push({ name: item2.cityName })
    //     }
    //   })
    // })
    // this.setData({
    //   result,
    // })
    util.request(api.gdSearchUrl, {
      keywords: e,
      output: 'JSON',
      city: this.data.current_city,
      key: api.gdKey
    }).then(res => {
      console.log(res);
      if (res.info == 'OK') {

        let list = res.tips;
        let result = list;
        if (list.length > 1) {
          //  result=list.splice(1);
          this.setData({
            result: result
          });

        } else {
          this.setData({
            result: []
          });
        }


      }
    });
  },
  /**
   * 清空验证码
   */
  clear_input() {
    this.setData({
      search: "",
      mapShow: true,
      cityShow: false,
      resultShow: false,
    })
  },
  touch(e) {
    let pageY = e.touches[0].pageY
    let index = Math.floor((pageY - this.data.barTop) / (this.data.barHeight / 22)) //向下取整
    let item = this.data.city_list[index]
    if (item) {
      this.setData({
        scrollViewId: item.letter,
        curr: index
      })
    }
  },
  touchStart(e) {
    this.setData({
      showLetter: true
    })
    this.touch(e)
  },
  touchMove(e) {
    this.touch(e)
  },
  touchEnd() {
    this.setData({
      showLetter: false,
    })
  },
  touchCancel() {
    this.setData({
      showLetter: false,
    })
  },
  mapFocus() {
    this.setData({
      mapShow: false,
      resultShow: true,
      cityShow: false,
      result: []
    });
  },
  switchCity() {
    if (this.data.cityShow) {
      this.setData({
        mapShow: true,
        cityShow: false,
        resultShow: false
      });
    } else {
      this.setData({
        mapShow: false,
        cityShow: true,
        resultShow: false,
        search: ''
      });
    }

  },
  msg(title, duration = 1500) {
    wx.showToast({
      title,
      duration,
      icon: 'none'
    });
  },
  regionChange(e) {

    console.log('isTouchMap', this.data.isTouchMap);
    if (this.data.isTouchMap == false) return;

    console.log('region变化' + this.data.index + ':' + e.detail.type, e);
   


    //  this.msg(this.data.index+'');
    // this.msg(`region: latitude: ${ latitude }, longitude: ${ longitude }`);
    //     经度范围：73°33′E至135°05′E 东经
		// 纬度范围：3°51′N至53°33′N 北纬
		//type为end才有centerLocation
		// && longitude > 72 && longitude < 136 && latitude > 3 && latitude < 54
    if (this.data.loadTime > 3 && e.detail.type == 'end' && e.causedBy == "drag") {

			const {
				centerLocation
			} = e.detail;
			let latitude = Number(centerLocation.latitude).toFixed(4);
			let longitude = Number(centerLocation.longitude).toFixed(4);

			console.log('当前中心点经纬度', latitude, longitude);
			
      // if (latitude == this.data.lat) return;

      this.setData({
        lng: longitude,
        lat: latitude,
        index: this.data.index + 1
      });
      this.getPoiList();


      // }
    }



    //     this.setData({
    //   currentMarker:[
    //     {longitude:Number(longitude),
    //     latitude:Number(latitude),
    //     // title: '',
    //   }
    //   ]
    // });
  },
  mapTap(e) {
    console.log(e.detail);
  },
  getPoiList() {
    util.request(api.gdUrl, {
      // location:'116.40159,39.90511',
      location: this.data.lng + ',' + this.data.lat,
      extensions: 'all',
      // poitype:'',
      key: api.gdKey,
      radius: 3000,
    }).then(res => {
      console.log('poi', res);
      if (res.info == 'OK') {
        let list = res.regeocode.pois;
        var t = '';
        var length = list.length;
        for (var i = 0; i < length; i++) {
          for (var j = 0; j < length - i - 1; j++) {
            if (Number(list[j].distance) > Number(list[j + 1].distance)) {
              t = list[j];
              list[j] = list[j + 1];
              list[j + 1] = t;
            }
          }
        }

        this.setData({
          currentName: list.length > 0 ? list[0].name : res.regeocode.addressComponent.streetNumber.street,
          poiList: list,
        })


      }
    });
  },
  resultTap(e) {
    //     adcode: "110101"
    // address: "1号线/八通线"
    // city: []
    // district: "北京市东城区"
    // id: "BV10006499"
    // location: "116.401216,39.907780"
    // name: "天安门东(地铁站)"
    // typecode: "150500"
    let location = e.currentTarget.dataset.location;
    let name = e.currentTarget.dataset.name;
    this.setData({
      currentName: name,
      lng: location.split(',')[0],
      lat: location.split(',')[1],
      resultShow: false,
      mapShow: true,
    });
    this.getPoiList();
  },
  cityTap(e) {
    // this.setData({
    //   isTouchMap: false
    // });

    console.log('isTouchMap', this.data.isTouchMap);

    let city = e.currentTarget.dataset.city;
    console.log(city);
    util.request(api.gdCityUrl, {
      address: city,
      output: 'JSON',
      key: api.gdKey,
    }).then(res => {
      console.log(res);
      if (res.info == 'OK') {
        let location = res.geocodes[0].location;
        this.setData({
          current_city: city,
          lng: location.split(',')[0],
          lat: location.split(',')[1],
          cityShow: false,
          mapShow: true,
        });
        this.getPoiList();

        // setTimeout(() => {
        //   this.setData({
        //     isTouchMap: true
        //   })
        // }, 500);

      }
    });
  },
  poiTap(e) {
    //     address: "菖蒲河沿9号(天安门东地铁站B东北口步行200米)"
    // businessarea: "东单"
    // direction: "东"
    // distance: "210.116"
    // id: "B0FFFLJW2Q"
    // location: "116.403456,39.908566"
    // name: "菖蒲河公园"
    // poiweight: "0.426156"
    // tel: []
    // type: "风景名胜;公园广场;公园"
    let poi = e.currentTarget.dataset.poi;
    console.log(poi);
    app.globalData.mapSelectFinish = true;
    app.globalData.mapSelectPoi = poi;
    wx.navigateBack();
  },
  mapUpdated(e) {
    console.log('mapupdated');
    console.log(e);
    // this.mapCtx = wx.createMapContext("myMap");
    this.mapCtx.getCenterLocation({
      success: (res) => {
        console.log(res);
      },
      fail: (res) => {

      },
    });
  }


})