前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序—经纬度逆地址解析的实现「建议收藏」

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

作者头像
全栈程序员站长
发布于 2022-09-14 01:49:57
发布于 2022-09-14 01:49:57
3.5K00
代码可运行
举报
运行总次数:0
代码可运行

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

前言

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

第一步:

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 授权获取地址信息
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并引入到项目中,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 引入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的每个服务接口是存在限制的。

完整代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 引入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😂 😂 😂 ,刚好今天不太忙,又碰巧想写点什么。

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年7月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
SpringCloud Alibaba 实战教程10-seata1.3整合nacos实现分布式事务
Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案。
gang_luo
2021/02/04
8300
SpringCloud Alibaba 实战教程10-seata1.3整合nacos实现分布式事务
「推荐」阿里开源的分布式事务框架 Seata
Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案。
码农架构
2020/10/26
8070
「推荐」阿里开源的分布式事务框架 Seata
25. Seata 介绍及四种模式优缺点
Seata(Simple Extensible Autonomous Transaction Architecture)是一个开源的分布式事务解决方案,旨在解决分布式系统中的事务一致性问题。它为开发者提供了一种简单而可扩展的方式来管理和协调分布式事务。
AI码师
2023/12/15
2.7K0
25. Seata 介绍及四种模式优缺点
seata AT模式流程
Seata 是一款阿里开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案,github地址:https://github.com/seata/seata。
luoxn28
2021/01/28
1.2K0
seata AT模式流程
从分布式事务解决到Seata使用,一梭子给你整明白了
大家好,欢迎来到小菜同学的个人 solo 学堂,知识免费,不吝吸收!关注免费,不吝动手!
蔡不菜丶
2021/04/16
9080
从分布式事务解决到Seata使用,一梭子给你整明白了
Spring Cloud 中的分布式事务,附源码《一》
在开发我的开源项目 prex 时,加入工作流,解决工作流用户与当前系统用户同步问题时,涉及到远程调用操作两个数据库所产生的事务问题,比如系统用户在增加用户同步工作流用户时,系统用户添加成功,工作流用户没有添加成功,则造成数据不一致问题,本地事务无法回滚,那么则使用分布式事务解决方案。
搜云库技术团队
2019/12/02
1.1K0
处理分布式事务(SpringCloud Alibaba Seata)
Seata是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布式事务服务。
鱼找水需要时间
2023/02/16
2640
处理分布式事务(SpringCloud Alibaba Seata)
Seata分布式事务 (理论与部署相结合)
在数据库水平拆分、服务垂直拆分之后,一个业务操作通常要跨多个数据库、服务才能完成。例如电商行业中比较常见的下单付款案例,包括下面几个行为:
不吃紫菜
2023/03/08
1.4K0
Seata分布式事务 (理论与部署相结合)
SpringCloud Alibaba Seata处理分布式事务
分布式之后:   单体应用被拆分成微服务应用,原来的三个模块被拆分成三个独立的应用,分别使用三个独立的数据源,业务操作需要调用三个服务来完成。此时每个服务内部的数据一致性由本地事务来保证,但是全局的数据一致性问题没法保证。
别团等shy哥发育
2023/02/25
2950
SpringCloud Alibaba Seata处理分布式事务
Seata分布式事务落地解决方案
上一篇文章介绍了分布式事务理论和相关解决方案的具体思路,我们下面快速复习一下相关知识点:
大忽悠爱学习
2023/02/13
1K0
Seata分布式事务落地解决方案
seata---分布式事务处理
Seata是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布式事务服务。
大忽悠爱学习
2021/12/07
8440
seata---分布式事务处理
Seata 分布式事务
四、修改 seata-server-0.9.0\seata\conf 目录下的 registry.conf 目录下的 registry.conf 配置文件
BUG弄潮儿
2021/06/25
5720
Seata 分布式事务
Seata 分布式事务
单体应用被拆分成微服务应用,原来的三个模块被拆分成三个独立的应用,分别使用三个独立的数据源,业务操作需要调用三三 个服务来完成。此时每个服务内部的数据一致性由本地事务来保证, 但是全局的数据一致性问题没法保证。
用户9615083
2022/12/25
8330
Seata 分布式事务
Seata--分布式事务
事务指的就是一个操作单元,在这个操作单元中的所有操作最终要保持一致的行为,要么所有操作都成功,要么所有的操作都被撤销。简单地说,事务提供一种“要么什么都不做,要么做全套”机制。
IT小马哥
2021/09/03
3700
Seata--分布式事务
学习分布式事务Seata看这一篇就够了,建议收藏
学习Seata分布式事务看这一篇就够了 一、事务的特性 二、本地事务与分布式事务 三、分布式事务理论依据 3.1、CAP定律 3.2、BASE理论 四、Seata简介 4.1、Seata是什么 4.2、官网地址 4.3、Seata基本架构 4.4、分布式事务解决方案 4.4.1、Seata-AT模式 4.4.2、Seata-XA模式 4.4.2.1、XA模式 什么是XA协议 Seata的事务模式 4.4.2.2、Seata的XA模式 为什么要在Seata中支持XA XA的价值 4.4.2.3、项目中应用XA模式 4.4.2.4、XA模式如何切换 4.4.3、Seata-TCC事务模式 4.4.3.1、什么是TCC 4.4.3.2、Seata的TCC模式 4.4.4、Seata-Saga事务模式 4.4.4.1、基本概念 4.4.4.2、为什么需要Saga 4.4.4.3、Saga状态机 4.4.4.4、Saga状态机设计器 4.5、四种模式的对比 五、部署Seata TC服务 5.1、下载seata-server 5.2、解压修改配置 5.3、初始化数据库配置 5.4、Nacos配置中心添加配置 5.5、测试启动TC服务 六、项目集成Seata 6.1、业务背景 6.2、数据表创建 6.3、搭建基本服务 6.3.1、代码基本结构 6.3.2、pom.xml引入依赖 6.3.3、配置文件application.yml 6.3.4、创建订单接口 6.3.5、声明Feign接口 6.3.6、测试验证 6.4、使用Seata全局事务注解@GlobalTransactional 6.5、配置数据源代理 6.6、启动服务测试
小小Java开发者
2023/11/25
8K0
学习分布式事务Seata看这一篇就够了,建议收藏
SpringCloud Alibaba Seata处理分布式事务
​ 单体应用被拆分成微服务应用, 原来的三个模块被拆分成三个独立的应用,分别使用三个独立的数据源。
OY
2022/03/17
5140
SpringCloud Alibaba Seata处理分布式事务
深度剖析分布式事务,轻松掌握实现原理与应用技巧!
大家好,今天我们来一起探讨分布式事务的相关知识。相信大家都有多多少少接触过分布式事务,因为我们现在写的代码可是服务于亿级用户量级的,那么大的请求量级不可能全部写在一台服务器上面对吧。如果你还没有研究过分布式事务,也没关系,我们今天再一起来探讨一番。我曾经接触过分布式事务相关的中间件框架,比如现在很火的阿里开源的一款分布式事务中间件Seata。目前我在Seata社区主要做一些RPC以及性能优化的相关工作,所以我可能会对分布式事务具体实现比较了解。以Seata为契机,我们一起来探讨分布式事务。
张乘辉
2023/09/02
5170
深度剖析分布式事务,轻松掌握实现原理与应用技巧!
[图文] Seata AT 模式分布式事务源码分析
AT 模式是 Seata 主推的分布式事务解决方案,最早来源于阿里中间件团队发布的 TXC服务,后来成功上云改名 GTS。相较于TCC而言,Seata的AT模式业务侵入性更低,易于接入。
田守枝
2019/07/11
2.5K0
[图文] Seata AT 模式分布式事务源码分析
分布式事务解决方案之Seata管理
前面两篇文章,已经讲解什么是分布式事务,并且讲解了XA协议和TCC三段提交来解决分布式服务,其实这两种方式都是有缺点,要么比较古老,要么实现起来复杂度搞。那么有没有一个第三方框架,能够直接整合到现有项目,直接把本地事务改成全局分布式事务,类似我们使用Transation注解一样。本文就是讲解新的一种解决方案,也就是阿里提出的Seata。
小明爱吃火锅
2023/12/10
5562
看了 5 种分布式事务方案,我司最终选择了 Seata,真香!
好长时间没发文了,最近着实是有点忙,当爹的第 43 天,身心疲惫。这又赶上年底,公司冲 KPI 强制技术部加班到十点,晚上孩子隔两三个小时一醒,基本没睡囫囵觉的机会,天天处于迷糊的状态,孩子还时不时起一些奇奇怪怪的疹子,总让人担惊受怕的。
程序员小富
2020/11/27
5910
看了 5 种分布式事务方案,我司最终选择了 Seata,真香!
推荐阅读
相关推荐
SpringCloud Alibaba 实战教程10-seata1.3整合nacos实现分布式事务
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验