wxmini/pages/map/testmap.js

// pages/map/testmap.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
import fetch from '../../utils/http'
const $api = require('../../config/api.js').$api;
const page = require('../../utils/page.js');

Page({

      /**
   * 页面的初始数据
   */
      data: {
        longitude: 116.313972,
        latitude: 39.980014,
        controls: [],
        markers: [],
        height: 'auto',
        markers: [],
        showLayer: false,
        windowHeight: 0,
        scale: 12,
        defaultMarkers: [],
        buildings: [],
        navList: [{
          value: '交通',
          id: 'bus',
          count: '20'
        }, {
          value: '教育',
          id: 'school',
          count: '20'
        }, {
          value: '医疗',
          id: 'hospital',
          count: '20'
        }, {
          value: '商业',
          id: 'business',
          count: '20'
        }],
        navIndex: 0,
        list: [],
        actionBuilding: {},
        buildingId: ''
      },
    
      /**
   * 生命周期函数监听页面加载
   */
  onLoad: function (options) {
    const id = page.getCurrentPageOptions().id
    if (id) {
      this.setData({
        buildingId: id
      })
    }

    qqmapsdk = new QQMapWX({
      key: 'KJCBZ-G2MKX-DB443-Z4CBR-7E6K2-GJF5D'
    });
    //保证wx.getSystemInfo的回调函数中能够使用this
    var that = this
    //调用wx.getSystemInfo接口，然后动态绑定组件高度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight,
          height: res.windowHeight
        })}
    })
  },

  clickMarker(marker) {
    this.setAction(marker.markerId)
  },

  setAction(buildingId) {
    const building = this.data.buildings.filter(x => x.buildingId == buildingId)[0]
    if (!building) {
      return
    }
    this.setData({
      actionBuilding: building
    })

    this.search()
  },

  search() {
    const building = this.data.actionBuilding
    const _this = this
    qqmapsdk.search({
      keyword: _this.data.navList[_this.data.navIndex].value, //搜索关键词
      page_size: 20,
      location: building.coordinate, //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        var navlist = []
        for (var i = 0; i < res.data.length; i++) {
          navlist.push({
            value: res.data[i].title,
            id: res.data[i].id,
            distance: res.data[i]._distance
          })
        }
        _this.setData({ //设置markers属性，将搜索结果显示在地图中
          showLayer: true,
          scale: 14,
          latitude: building.coordinate.split(',')[0],
          longitude: building.coordinate.split(',')[1],
          height: 300,
          list: navlist,
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

  GetGreatCircleDistance(lat1, lng1, lat2, lng2) {
    if (lat1 === lat2 && lng1 === lng2) {
      return 0
    }
    var EARTH_RADIUS = 6378137.0//单位M
    var PI = Math.PI
    var radLat1 = lat1 * PI / 180.0
    var radLat2 = lat2 * PI / 180.0
    var a = radLat1 - radLat2
    var b = lng1 * PI / 180.0 - lng2 * PI / 180.0
    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 * EARTH_RADIUS
    s = Math.round(s * 10000) / 10000.0
    return s / 100
  },

    /**
   * 生命周期函数监听页面初次渲染完成
   */
    onReady: function() {
      const _that = this
      fetch({
        url: $api.building.list.url,
        method: $api.building.list.method,
        data: {
          pageNum: 1,
          pageSize: 10
        }
      }).then((buildings) => {
        let list = buildings.data
        if (_that.data.buildingId && _that.data.buildingId != '') {
          list = list.filter(x => x.buildingId == _that.data.buildingId)
        }
        const markers = list.map(x => {
          return {
            id: x.buildingId,
            latitude: x.coordinate.split(',')[0],
            longitude: x.coordinate.split(',')[1],
            iconPath: '',
            label: {
              content: x.buildingName,
              color: '#fff',
              bgColor: '#bb9c79',
              padding: 5,
              borderRadius: 5
            }
          }
        })
        _that.setData({
          defaultMarkers: markers,
          markers: markers,
          longitude: markers[0].longitude,
          latitude: markers[0].latitude,
          buildings: list
        })
        if (_that.data.buildingId && _that.data.buildingId != ''){
          _that.setAction(_that.data.buildingId)
        }
      })

    },

    /**
   * 生命周期函数监听页面显示
   */
    onShow: function() {
    
    },

    /**
   * 生命周期函数监听页面隐藏
   */
    onHide: function() {
    
    },

    /**
   * 生命周期函数监听页面卸载
   */
    onUnload: function() {
    
    },

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

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

    /**
   * 用户点击右上角分享
   */
    onShareAppMessage: function() {
    
    },
    cutNav(e) {
      this.setData({
        navIndex: e.target.dataset.index
      })
      this.search()
  },
  closeLayer(){
    if (this.data.buildingId == '') {
      this.setData({
        showLayer: false,
        height: this.data.windowHeight
      })
    }
  },
  toFirstPage() {
    wx.navigateTo({
      url: '/pages/index/index'
    })
  },
  toDaohang() {
    wx.openLocation({
      latitude: this.data.actionBuilding.coordinate.split(',')[0] - 0,
      longitude: this.data.actionBuilding.coordinate.split(',')[1] - 0,
      scale: 16
    })
  }
})