微信小程序纯前台获取当前具体位置

微信小程序纯前台获取当前具体位置

准备工作

腾讯地图微信小程序开发指南：
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

1. 申请开发者密钥（key）：申请密钥
2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
4. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com
   ps：说实话没找到‘设置’在哪里。。。
   微信开发者工具右上角==》详情-本地设置-不检验合法域名…
   貌似也可以，不知道是不是一个意思，目前运行起来没有问题，暂且先这么用吧，有知道的大佬可以指点一下

1.获取当前位置，拉起授权

1.在app.json中声明permission字段

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

ps：微信小程序getLocation() 需要在app.json中声明permission字段
参考：https://blog.csdn.net/guochanof/article/details/89669839

2.在当前页面js文件中引入qqmap-wx-jssdk.js（JavaScriptSDK v1.2）

const QQMapWX = require('../../../utils/qqmap-wx-jssdk.js')

3.获取当前地理位置 授权验证

// 获取当前地理位置 授权验证
  getCurrentLocal(){
    let that = this;
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
          wx.openSetting({
            success(res) {}
          })
        }  else { // 第一次授权，或者已授权，直接调用相关api
          that.getMyLocation()
        }
      }
    })
  },

4.获取当前地理位置

//获取当前地理位置
getMyLocation(){
	let that = this
    wx.getLocation({
		type: 'wgs84',
		success(res) {  
			...
		}
	})
}

参考：https://www.cnblogs.com/Mrrabbit/p/11776332.html

2.坐标转换，精确定位

WebService API----坐标转换

getMyLocation(){
    let that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {  
        console.log('location', res);
        var locationString = res.latitude + "," + res.longitude;
        
        //坐标转换
        wx.request({
          url: 'https://apis.map.qq.com/ws/coord/v1/translate?',
          data: {
            locations:locationString,
            type:1,
            key:'此处填自己申请好的key'
          },
          method: 'GET',
          success: function (request) {
            console.log(request);
            var locationString_new = request.data.locations[0].lat + "," + request.data.locations[0].lng;
            ...
          }
        });
        
      }
    })
  },

3.地址逆解析，坐标转换为文字地址

1.第一种，reverseGeocoder方式：
reverseGeocoder逆地址解析(坐标位置描述)

getMyLocation(){
    let that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log(res)
        that.getAddress(res.latitude, res.longitude)
      }
    })
  },
  getAddress(latitude, longitude) {
    let that = this
    // 生成 QQMapWX 实例
    let qqmapsdk = new QQMapWX({
        key: '此处填自己申请好的key'
    })
    // reverseGeocoder 为 QQMapWX 解析 经纬度的方法
    qqmapsdk.reverseGeocoder({
      location: {latitude,longitude},
        success(res) {
            console.log('success', res)
            var current_location = res.result.address_component.street_number
            that.setData({
                current_location: current_location,
                flag: true
            })
        }
    })
  },

2.第二种，网络请求方式：

getMyLocation(){
    let that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {  
        console.log('location', res);
        var locationString = res.latitude + "," + res.longitude;
        wx.request({
          url: 'https://apis.map.qq.com/ws/coord/v1/translate?',
          data: {
            locations:locationString,
            type:1,
            key:'此处填自己申请好的key'
          },
          method: 'GET',
          success: function (request) {
            console.log(request);
            var locationString_new = request.data.locations[0].lat + "," + request.data.locations[0].lng;
			
			//逆解析主要代码
            wx.request({
              url: 'http://apis.map.qq.com/ws/geocoder/v1/',
              data: {
                "key": "IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6",
                "location": locationString_new
              },
              method: 'GET',
              success: function (r) {
                console.log(r);
                //输出一下位置信息
                console.log('当前位置',r.data.result.formatted_addresses.recommend)
                var current_location = r.data.result.formatted_addresses.recommend
                that.setData({
                  current_location: current_location,
                  flag: true
                })
                //这步是将位置信息保存到本地缓存中，key = value的形式
                try {
                  wx.setStorageSync('locationInfo', r.data.result.formatted_addresses.recommend)
                } catch (e) {
                  console.log(e)
                }
              }
            });

          }
        });
      }
    })
  },

参考：https://www.cnblogs.com/wangshengli520/p/10286591.html
*
*
*
*
*

至此，效果基本实现

完整代码
app.json

{
  "pages":[
    "pages/homepage/test/test", 
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

wxml：

<view class="flex">
  <view class="">当前位置：</view>
  <view class="" wx:if="{{flag}}">{{current_location}}</view>
  <view class="" wx:else bindtap="getCurrentLocal"><button style="font-size:28rpx;">获取地理位置</button></view>
</view>

js：

const QQMapWX = require('../../../utils/qqmap-wx-jssdk.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    current_location:'',
    flag: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this 
    that.getCurrentLocal()
  },

  // 获取当前地理位置 授权验证
  getCurrentLocal(){
    let that = this;
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
          wx.openSetting({
            success(res) {}
          })
        }  else { // 第一次授权，或者已授权，直接调用相关api
          that.getMyLocation()
        }
      }
    })
  },
  //获取当前地理位置
  getMyLocation(){
    let that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {  
        console.log('location', res);
        var locationString = res.latitude + "," + res.longitude;
        wx.request({
          url: 'https://apis.map.qq.com/ws/coord/v1/translate?',
          data: {
            locations:locationString,
            type:1,
            key:'IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6'
          },
          method: 'GET',
          success: function (request) {
            console.log(request);
            var locationString_new = request.data.locations[0].lat + "," + request.data.locations[0].lng;
            wx.request({
              url: 'http://apis.map.qq.com/ws/geocoder/v1/',
              data: {
                "key": "IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6",
                "location": locationString_new
              },
              method: 'GET',
              success: function (r) {
                console.log(r);
                //输出一下位置信息
                console.log('当前位置',r.data.result.formatted_addresses.recommend)
                var current_location = r.data.result.formatted_addresses.recommend
                that.setData({
                  current_location: current_location,
                  flag: true
                })
                //这步是将位置信息保存到本地缓存中，key = value的形式
                try {
                  wx.setStorageSync('locationInfo', r.data.result.formatted_addresses.recommend)
                } catch (e) {
                  console.log(e)
                }
              }
            });

          }
        });
      }
    })
  },


// // 获取当前地理位置(reverseGeocoder方式)
  // getMyLocation(){
  //   let that = this
  //   wx.getLocation({
  //     type: 'wgs84',
  //     success(res) {
  //       console.log(res)
  //       that.getAddress(res.latitude, res.longitude)
  //     }
  //   })
  // },
  // getAddress(latitude, longitude) {
  //   let that = this
  //   // 生成 QQMapWX 实例
  //   let qqmapsdk = new QQMapWX({
  //       key: 'IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6'
  //   })
  //   // reverseGeocoder 为 QQMapWX 解析 经纬度的方法
  //   qqmapsdk.reverseGeocoder({
  //     location: {latitude,longitude},
  //       success(res) {
  //           console.log('success', res)
  //           var current_location = res.result.address_component.street_number
  //           that.setData({
  //               current_location: current_location,
  //               flag: true
  //           })
  //       }
  //   })
  // },
	
})

PS：测试发现 微信开发者工具和真机正常， 预览和发布需要开启手机调试才能看到效果，不开可能看不到效果

本文地址：https://blog.csdn.net/qq_43588387/article/details/110652273