// 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: 1000, 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)) } }