微信小程序—经纬度逆地址解析的实现「建议收藏」

微信小程序—经纬度逆地址解析的实现「建议收藏」小ZXZ小

大家好,又见面了,我是你们的朋友全栈君。

前言

最近遇到工作中遇到一个需求,当用户打开小程序时,小程序页面中对应的位置信息变为用户当前位置,且用户能更改当前地址信息;看到这个需求我想大部分人和我想到的就是使用微信官方API中的wx.getLocation来实现,通过它我们能拿到当前位置的经纬度,之后将经纬度转换为地址信息。

微信小程序—经纬度逆地址解析的实现「建议收藏」

第一步:

获取当前位置的经纬度,微信官方文档中明确指出在调用wx.getLocation前是需要用户授权的,我们需要考虑到当用户拒绝授权的情况发生,因此我的做法是直接调用wx.getLocation,在失败的回调中去处理用户未授权或者拒绝的情况,代码如下:

// 授权获取地址信息
checkAuth(callback) {
  wx.getLocation({
    type: 'gcj02',
    isHighAccuracy: true, // 开启高精度
    success(res) {
      // res 返回值 { accuracy: 65, errMsg: "getLocation:ok", horizontalAccuracy: 65, latitude: 22.53332, longitude: 113.93041, speed: -1, verticalAccuracy: 65 }
      callback(res);
    },
    fail: function(error) {
      wx.showModal({
        title: '是否授权当前位置',
        content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
        success: (res) => {
          if (res.confirm) {
            wx.openSetting({
              success: function (data) {
                if (data.authSetting["scope.userLocation"]) {
                  wx.getLocation({
                    type: 'gcj02',
                    isHighAccuracy: true,         // 开启高精度
                    success(res) {
                      // res 返回值 { accuracy: 65, errMsg: "getLocation:ok", horizontalAccuracy: 65, latitude: 22.53332, longitude: 113.93041, speed: -1, verticalAccuracy: 65 }
                      callback(res);
                    }
                  })
                } else {
                  wx.showToast({
                    title: '授权失败',
                    icon: 'success',
                    duration: 1000
                  })
                }
              }
            })
          }
        },
      })     
    }
  })
}

注: 这里有个小坑,我之前在开发者工具上调试,拿到的经纬度去做地址逆向解析始终不对,代码查了又查,一次又一次的debugger弄了2小时都没解决,之后在开发者社区中看到网友给的说法是开发者工具中的经纬度是错的,但是手机上不会,经测试ok;在这里要感谢这位网友。

 

第二步:

在没有查阅相关文档之前一直以为,这类地址信息前端只需要拿到经纬度去调后端接口,后端返回前端想要的数据,地址的逆向解析是由后端来做的,也是在查阅相关文档的过程中看到了微信官方提供的解决方案,腾讯位置服务之逆地址解析

我们首先需要申请开发者秘钥,申请完成我们将得到一个key

微信小程序—经纬度逆地址解析的实现「建议收藏」

根据官方文档我们需要下载微信小程序javascriptSDK并引入到项目中,

// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'xxxx-xxxx-xxxx'    // 这里就是申请的key
});

// 获取地址信息
getAddressInfo() {
    var that = this;
    var location = {
        latitude: that.data.latitude,
        longitude: that.data.longitude
    };
  
    qqmapsdk.reverseGeocoder({
        location,
        get_poi: 1,        // 是否返回周边POI列表:1.返回;0不返回(默认)
        poi_options: "policy=2;radius=5000",
        success: res => {
          var res = res.result;

          that.setData({
            activeAddress: res.address,    // 当前经纬度解析的地址
            addressList: res.pois,         // 附近的地址列表信息
          });
        },
  
        fail: function(error) {
          console.error(error);
        },
  
        complete: function(res) {
          // console.log(res);
        }
    })
}

这里有几个坑需要注意poi_options的值中存在多个参数需要用”;”来隔开,第二个就是一定不要忘了在小程序中配置安全域名”https://apis.map.qq.com“,另外就是每个key的每个服务接口是存在限制的。

完整代码如下:

// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'xxxx-xx-xxxx-xxxx'
    });

    this.getAddressInfo();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  // 授权获取地址信息
  checkAuth(callback) {
    wx.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,         // 开启高精度
      success(res) {
        callback(res);
      },
      fail: function() {
        wx.showModal({
          title: '是否授权当前位置',
          content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
          success: (res) => {
            if (res.confirm) {
              wx.openSetting({
                success: function (data) {
                  if (data.authSetting["scope.userLocation"]) {
                    wx.getLocation({
                      type: 'gcj02',
                      isHighAccuracy: true,         // 开启高精度
                      success(res) {
                        callback(res);
                      }
                    })
                  } else {
                    wx.showToast({
                      title: '授权失败',
                      icon: 'success',
                      duration: 1000
                    })
                  }
                }
              })
            }
          },
        })     
      }
    })
  },

  // 获取地址信息
 getAddressInfo() {
    
    var that = this;
    that.checkAuth((res) => {

      var location = {
        latitude: res.latitude,
        longitude: res.longitude
      };
  
      qqmapsdk.reverseGeocoder({
        location: location,
        get_poi: 1,        // 是否返回周边POI列表:1.返回;0不返回(默认)
        poi_options: "policy=2;radius=5000",
        success: res => {
          var res = res.result;
          that.setData({
            activeAddress: res.address,
            addressList: res.pois
          });
        },
  
        fail: function(error) {
          console.error(error);
        },
  
        complete: function(res) {
          // console.log(res);
        }
      })
    })
  }
})

最近才发现又几年没写东西了,一直都是在忙做项目改bug,或者说是写bug?  ?  ?  ,刚好今天不太忙,又碰巧想写点什么。

欢迎讨论交流,如果文章对您有一丝帮助,请不啬点赞哦。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158827.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SQL 语句练习

    实验名称SQL语句练习实验地点实验楼502实验日期3.21 一、实验目的及要求 1.加深对表间关系的理解 2.理解数据库中数据的查询方法和应用 3.掌握各种查询的异同及相互之间的转换方法 4.掌握各种查询要求的实现 二、实验环境 Sql…

  • linux0.11_linux vim安装

    linux0.11_linux vim安装前言所有的UnixLike系统都会内建vi文书编辑器,其他的文书编辑器则不一定会存在。但是目前我们使用比较多的是vim编辑器。vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的

  • L1-046 整除(模拟除法)

    L1-046 整除(模拟除法)原题链接这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如,111111就可以被13整除。 现在,你的程序要读入一个整数x,这个整数一定是奇数并且不以5结尾。然后,经过计算,输出两个数字:第一个数字s,表示x乘以s是一个光棍,第二个数字n是这个光棍的位数。这样的解当然不是唯一的,题目要求你输出最小的解。提示:一个显然的办法是逐渐增加光棍的位数,直到可以整除x为止。但难点在于,s可能是个非常大的数 ——

  • SVN—SVN服务器搭建和使用[通俗易懂]

    本系列会总结一些svn和git的安装和使用,以及最后svn的项目如何迁移到git上,整个系列会持续输出。 要学习svn,那么首先开始搭建svn服务器和客户端。 下面要讲的有:svn下载和安装svn配置文件svn服务器的使用1:svn服务器和客户端安装包下载和安装 Subversion是优秀的版本控制工具, 现在Subversion已经迁移到apache网站上了,下载地址: http://

  • 程序员转行为啥啦么难

    程序员转行为啥啦么难

  • window下彻底卸载删除SQL Serever 2012

    window下彻底卸载删除SQL Serever 2012对于刚刚涉足数据库软件的小白们,肯定会遇到由于下载的数据库是英文版的,但是又由于自身的英文水平有限,一些专业的英文单词看的并不是很明白想着是否能够将英文的SQLserver2012汉化,但是由于有中文版的SQL,汉化这件事就很少有人弄了,所以在网上很少出现中文包大家肯定有过怎样才能将SQL彻底的卸载干净,毕竟安装目录加上实例目录加上就有10G,由于一些实例目录默认在系统C盘,占据了很大的一部

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号