nazw/nnzwminiapp/pages/map-shq/map-shq.js

// pages/map-shq/map-shq.js
import {
  imgUrl,
  newImgUrl
} from "../api/request"

import {
  getMapDataAll,
  getHandMatterPage
} from "../api/yxna-api"

var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
var BMap = new QQMapWX({
  key: 'KN3BZ-KUDND-PGH4Y-POVRP-43KF3-RNF4K'
});
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl: imgUrl,
    newImgUrl: newImgUrl,
    custGap: 10000,
    latitude: 0,
    longitude: 0,
    scrollId: 0,
    clickType: false,
    detail: {},
    marks: [],
    addressList: [],
    circle: [],
    deptNow: '',
    navType: 0,
    page: 1,
    limit: 6,
    pagePrev: true,
    pageNext: false,
    eventList: [],
    depMap: {
      '重庆市南岸区政务服务中心（江南新城中心）': ['重庆市南岸区残联', '重庆市南岸区财政局', '重庆市南岸区文化和旅游发展委员会', '重庆市南岸区档案馆', '重庆市南岸区卫生健康委员会', '重庆市南岸区交通局', '重庆市南岸区规划自然资源局', '重庆市南岸区住房和城乡建设委员会', '重庆市南岸区生态环境局', '重庆市南岸区农业农村委员会', '重庆市南岸区发展和改革委员会', '重庆市南岸区消防救援支队', '重庆市南岸区城市管理局', '重庆市公安局南岸分局'],
      '重庆市南岸区政务服务中心（南坪中心）': ['重庆市南岸区市场监管局', '重庆市公安局南岸分局'],
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const _this = this
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res)
        initListApi(_this)
        initAddress(_this)
        _this.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          circle: [{
            latitude: res.latitude,
            longitude: res.longitude,
            radius: _this.data.custGap + 500,
            fillColor: '#c4d2ec6a',
            color: '#c4d2ec'
          }],
          marks: [{
            id: -1,
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: imgUrl+"/location.png",
            width: '15px',
            height: '20px',
            label: {
              anchorX: 10,
              anchorY: -22,
              bgColor: '#fff',
              borderRadius: 5,
              padding: 5,
              content: '当前位置',
              color: '#333'
            }
          }]
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  openVR(e) {
    wx.navigateTo({
      url: '../map-vr/map-vr',
    });
  },
  markTap(e) {
    clickMark(this, e.markerId)
  },
  labelTap(e) {
    clickMark(this, e.markerId)
  },
  itemTap(e) {
    const index = e.currentTarget.dataset.index
    let detail = this.data.addressList[index]
    if (detail.tel && !(detail.tel instanceof Array)) {
      let arr = detail.tel.split(";")
      detail.tel = arr
    }
    const depMap = this.data.depMap
    if (depMap[detail.dep]) {
      detail.dept = depMap[detail.dep]
      let arr = []
      for (let i = 0; i < detail.dept.length; i++) {
        arr.push({
          dep: detail.dept[i],
          name: detail.dept[i].replace('重庆市', '').replace('南岸', '')
        })
      }
      detail.deptAll = depMap[detail.dep].join(',')
      detail.dept = arr
    }
    matterApi(this, {
      page: 1,
      type: 0,
      matterDept: depMap[detail.dep] ? depMap[detail.dep].join(",") : detail.dep.replace('政府', '').replace('便民服务中心', '')
    })
    
    this.setData({
      clickType: true,
      detail: detail,
      deptNow: depMap[detail.dep] ? detail.deptAll : '',
      page: 1,
      navType: 0,
    })
  },
  clickDept(e) {
    this.setData({
      deptNow: e.currentTarget.dataset.dep || ''
    })
    const _this = this
    matterApi(_this, {
      page: 1,
      type: 0,
      matterDept: e.currentTarget.dataset.dep
    })
  },
  goBack(e) {
    this.setData({
      clickType: false
    })
  },
  telTap(e) {
    let phoneNumber = e.currentTarget.dataset.value;
    wx.makePhoneCall({
        phoneNumber: phoneNumber,
    });
  },
  matterTab(e) {
    this.setData({
      navType: e.currentTarget.dataset.type
    })
    const _this = this
    matterApi(_this, {
      page: _this.data.page,
      type: e.currentTarget.dataset.type,
      matterDept: _this.data.deptNow || _this.data.detail.dep.replace('政府', '').replace('便民服务中心', '')
    })
  },
  clickPageTo(e) {
    const type = e.currentTarget.dataset.type
    if (type == 0 && this.data.pagePrev) {
      return
    } else if (type == 1 && this.data.pageNext) {
      return
    }
    let page = this.data.page
    if (type == 0) {
      page--
    } else {
      page++
    }
    const _this = this
    matterApi(_this, {
      page: page,
      type: _this.data.navType,
      matterDept: _this.data.deptNow || _this.data.detail.dep.replace('政府', '').replace('便民服务中心', '')
    })
  }, 
  searchMap(e) {
    let key = 'KN3BZ-KUDND-PGH4Y-POVRP-43KF3-RNF4K'; //使用在腾讯位置服务申请的key
    let referer = '掌上南岸'; //调用插件的app的名称
    let changeValue = "transit";
    const _this = this
    let endPoint = JSON.stringify({
      'name': _this.data.detail.dep,
      'latitude': _this.data.detail.latitude,
      'longitude': _this.data.detail.longitude
  });
    wx.navigateTo({
      url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + "&mode=" + changeValue
  });
  }
})

function clickMark(_this, markerId) {
  if (markerId <= 0) {
    return
  }
  let marks = _this.data.marks
  for (let i = 0; i < marks.length; i++) {
    if (markerId == marks[i].id) {
      marks[i].label.bgColor = '#e1f5fe'
    } else {
      marks[i].label.bgColor = '#fff'
    }
  }
  _this.setData({
    scrollId: markerId,
    marks: marks
  })
}

function matterApi(_this, params) {
  console.log(params)
  params.limit = _this.data.limit
  _this.setData({
    pagePrev: params.page == 1,
    page: params.page,
  })
  getHandMatterPage(params).then((res) => {
    _this.setData({
      pageNext: params.page * params.limit >= res.count,
      eventList: res.data
    })
  })
}

function initListApi(_this) {
  getMapDataAll().then((res) => {
    if (res.data) {
      let arr = []
      for (let key in res.data) {
        arr = arr.concat(res.data[key])
      }
      let scrollId = 0
      let depArr = []
      let data = []
      let markArr = _this.data.marks
      for (let i = 0; i < arr.length; i++) {
        if (depArr.indexOf(arr[i].dep) == -1) {
          depArr.push(arr[i].dep)
          arr[i].gap = getDistances(arr[i].latitude, arr[i].longitude, _this.data.latitude, _this.data.longitude)
          if (arr[i].gap.m <= _this.data.custGap) {
            // if (arr[i].dep == '重庆市南岸区政务服务中心（江南新城中心）'||i<10) {
            if (scrollId == 0) {
              scrollId = arr[i].id
            }
            data.push(arr[i])
            markArr.push({
              id: arr[i].id,
              latitude: arr[i].latitude,
              longitude: arr[i].longitude,
              iconPath: imgUrl+"/location.png",
              width: '15px',
              height: '20px',
              label: {
                anchorX: 10,
                anchorY: -22,
                bgColor: '#fff',
                borderRadius: 5,
                padding: 5,
                content: arr[i].dep,
                color: '#333'
              }
            })
          }
        }
      }
      data.sort((a, b) => {
        return a.gap.m - b.gap.m
      })
      _this.setData({
        marks: markArr,
        addressList: data,
        scrollId: scrollId
      })
    }
  })
}
function initAddress(_this) {
  console.log(BMap)
  BMap.reverseGeocoder({
    success: function(res) {
      console.log(res)
      _this.setData({
        address: res.result.address
      })
    }, fail: function(err) {
      console.log(err)
    }
  })
}

// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
function getDistances(lat1, lng1, lat2, lng2) {
	let EARTH_RADIUS = 6378.137;// 地球半径
	let radLat1 = lat1 * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
	let radLat2 = lat2 * Math.PI / 180.0;
	let a = radLat1 - radLat2;
	let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
	let 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 * EARTH_RADIUS; 
	s = Math.round(s * 10000) / 10000;// 输出为公里
	return { m: Number((s * 1000).toFixed(2)), km: Number(s.toFixed(2)) }
}