小程序使用腾讯地图地位(未授权时提示客户授权)

1、代码结构

腾讯地图小程序 SDK ,地址:http://lbs.qq.com/qqmap_wx_jssdk/index.html

微信公众平台:request合法域名  https://apis.map.qq.com

小程序使用腾讯地图地位(未授权时提示客户授权)_第1张图片

2、index代码

const app = getApp();
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    province: '',
    city: '',
    district: '',
    latitude: '',
    longitude: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
      //定位
      qqmapsdk = new QQMapWX({
        key: 'key' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
      });
  },
  onShow: function() {
    let vm = this;
    vm.getUserLocation();
  },
  getUserLocation: function() {
    let vm = this
    wx.getLocation({
      success: function(res) {
        //获取定位
        vm.getLocation();
      },
      fail: function() {
        console.log("用户点击了取消")
        wx.getSetting({
          success: function(res) {
            console.log(res)
            if (res.authSetting["scope.userLocation"] == false) {
              console.log("判断失败后")
              wx.showModal({
                title: '请授权您的地理位置',
                content: '需要您的地理位置',
                success: function(res) {
                  console.log(res.cancel)
                  wx.openSetting({
                    success(res) {
                      if (res.authSetting["scope.userLocation"] == true) {
                        wx.showToast({
                          title: '授权成功',
                          icon: 'success',
                          duration: 1000
                        })
                      } else {
                        wx.showToast({
                          title: '授权失败',
                          icon: 'none',
                          duration: 1000
                        })
                      }
                    },
                    fail: function(res) {
                      console.log("调起失败")
                    }
                  })
                },
                fail: function(res) {
                  console.log(res.cancel)
                }
              })
            }
          },
        })

      }
    })
  },

  // 微信获得经纬度
  getLocation: function () {
    let vm = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(JSON.stringify(res))
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy;
        vm.getLocal(latitude, longitude)
      },
      fail: function (res) {
        console.log('fail' + JSON.stringify(res))
      }
    })
  },
  // 获取当前地理位置
  getLocal: function (latitude, longitude) {
    let vm = 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;
        var url = vm.data.url;
          vm.setData({
            province: province,
            city: city,
            district: district,
            latitude: latitude,
            longitude: longitude
          })       
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
})

3、效果图

小程序使用腾讯地图地位(未授权时提示客户授权)_第2张图片

取消授权后

小程序使用腾讯地图地位(未授权时提示客户授权)_第3张图片

点击确定授权

小程序使用腾讯地图地位(未授权时提示客户授权)_第4张图片

打开授权

小程序使用腾讯地图地位(未授权时提示客户授权)_第5张图片

你可能感兴趣的:(小程序功能)