微信小程序使用地圖

小程序使用地圖:

1.這是基本使用：使用下面的代碼可以是進行位置的授權，獲取當前的位置，得到騰訊的坐標系和當前的位置名稱，街道啥的
2.微信公眾平台有官方的map控件，可以進行使用，顯示當前的地理位置等等，返回的是 gcj02 坐標系，
需要引入騰訊地圖的api —— js：

從這下載：需要引入騰訊地圖的api —— js：https://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: '申請的key'
        });
    },
    onShow: function () {
        // 調用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
 
 
})

  // 判斷用戶是否拒絕地理位置信息授權，拒絕的話重新請求授權
  getUserLocation: function () {
    let that = this;
    wx.getSetting({
      success: (res) => {
        // console.log(res)
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化進入該頁面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化進入該頁面,且未授權
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授權
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '請求授權當前位置',
            content: '需要獲取您的地理位置，請確認授權',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒絕授權',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授權成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授權，調用wx.getLocation的API
                      that.getLocation();
                    } else {
                      wx.showToast({
                        title: '授權失敗',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //調用wx.getLocation的API
          that.getLocation();
        } else {
          //調用wx.getLocation的API
          that.getLocation();
        }
      }
    })
  },
  // 獲取定位當前位置的經緯度
  getLocation: function () {
    let that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        let latitude = res.latitude
        let longitude = res.longitude
        // app.globalData.lat = res.latitude; //
        // app.globalData.lng = res.longitude; //把onload定位時候的經緯度存到全局
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
        that.getLocal(latitude, longitude)
      },
      fail: function (res) {
        console.log('fail' + JSON.stringify(res))
      }
    })
  },
  // 獲取當前地理位置
  getLocal: function (latitude, longitude) {
    let that = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city
        let district = res.result.ad_info.district;
        // 保存一下當前定位的位置留着后面重新定位的時候搜索附近地址用
        // app.globalData.currentLocation = district;
        that.setData({
          province: province,
          city: city,
          latitude: latitude,
          longitude: longitude,
          district: district
        })
        // console.log(res);
        if (that.getDisance(that.data.latitude, that.data.longitude, that.data.centralPositionLat, that.data.centralPositionLon) > that.data.attendValue.centralDistance) {
          that.setData({
            islocat: false
          })
        } else {
          that.setData({
            islocat: true
          })
        }
        that.setData({
          location: res.result.address
        })

        // console.log('這是距離', that.getDisance(that.data.latitude, that.data.longitude, that.data.centralPositionLat, that.data.centralPositionLon) , that.data.attendValue.centralDistance);

        // console.log('province', province, '--', 'city', '--', city, 'latitude', '--', latitude, 'longitude', '--', longitude, 'district', '--', district);

      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },
  // 測算距離是否在打卡范圍內
  getDisance(lat1, lng1, lat2, lng2) {
    var dis = 0;
    var radLat1 = this.toRad(lat1);
    var radLat2 = this.toRad(lat2);
    var deltaLat = radLat1 - radLat2;
    var deltaLng = this.toRad(lng1) - this.toRad(lng2);
    var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
    return dis * 6378137;
  },
  toRad(d) {
    return d * Math.PI / 180;
  },

wx.onLocationChange()的使用

微信小程序 使用 wx.onLocationChange() https://www.jianshu.com/p/2c2e9402e66d

使用插件的進行顯示：

比如一些路線規划啥的，騰訊地圖基本上是對小程序支持最好的了，畢竟是官方的，所以小程序提供了很多的插件，.
https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview