欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-24 10:19:12
微信小程序纯前台获取当前具体位置准备工作1.获取当前位置，拉起授权2.坐标转换，精确定位3.地址逆解析，坐标转换为文字地址准备工作腾讯地图微信小程序开发指南：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview申请开发者密钥（key）：申请密钥开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存(小程序SDK需要用...

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

准备工作

腾讯地图微信小程序开发指南：
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

相关标签： 小程序

上一篇： selenium学习总结

下一篇： 弱符号__attribute__((weak))

推荐阅读