vue 获取微信定位经纬度,并调用高德地图解析出详细地址

2023-10-27

第一步:安装weixin-js-sdk,命令:npm i -S weixin-js-sdk 或者 npm install weixin-js-sdk

 

第二步:在需要的地方引用:

import wx from "weixin-js-sdk";

第三步:简单的封装了个获取地址方法,并暴露出来

/*
* 微信获取地址
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{data}:配置参数
*/
import wx from "weixin-js-sdk";

export const wxLocation = (data, cb, errorCb) => {
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		appId: data.appId, // 必填,公众号的唯一标识
		timestamp: data.timestamp, // 必填,生成签名的时间戳
		nonceStr: data.nonceStr, // 必填,生成签名的随机串
		signature: data.signature, // 必填,签名
		jsApiList: ['checkJsApi','getLocation'] // 必填,
	});
	wx.checkJsApi({
		jsApiList: ['getLocation'],
		success: function (res) {
			if (res.checkResult.getLocation == false) {
				alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
				return;
			}
		}
	});
	wx.ready(function () {
		wx.getLocation({
			type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
			success: function (res) {
				cb(res)
			},
			fail: function (err) {
				errorCb(err);
			}
		});

	});
	wx.error(function (res) {
		// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
		console.log('验证失败返回的信息:', res);
	});
}

第四步:调用该方法

import { wxLocation } from "@/common/utils.js";

 //获取位置
        get_wz() {
            var that = this;
               //前端编码路径后,后端要相对应的解码,例如PHP的话要用urldecode
            var urls = encodeURIComponent(window.location.href.split('#')[0]);
            //本人跟后台协商好,我传页面url给后台,后台获取并返回微信config所需要的参数
            //nonceStr 这个参数要注意,你们可以跟后台协商好,注意大小写
            that.$axios.get("/xxx", {
                params: {
                    url: urls
                }
            }).then(res => {
                var code = res.data.code;
                switch (code) {
                    case 1001:
                        var result = res.data.result;
                        wxLocation(result, succ => { //成功
                            var latitude = succ.latitude; // 纬度,浮点数,范围为90 ~ -90
                            var longitude = succ.longitude; // 经度,浮点数,范围为180 ~ -180。
                            var accuracy = succ.accuracy; // 位置精度
                            //高德地图sdk,需要你在高德申请好
                            var mapurl = 'https://restapi.amap.com/v3/geocode/regeo?key=你的高德key&location=' + longitude + ',' + latitude + '&output=JSON&batch=false&roadlevel=0';
                            that.$axios.get(mapurl, {}).then(mapres => {
                                // console.log(mapres);
                                var rcd = mapres.data.regeocode;
                                //这个是具体的详细地址
                                that.addr = rcd.formatted_address;
                                
                            }).catch(function (maperr) {
                                console.log("error", maperr)
                            })
                        }, err => { //失败
                            console.log('验证失败:', err)
                        })
                        break;
                    default:
                        break;
                }
            }).catch(function (error) {
                console.log("error", error)
            })
        }
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

有不理解的地方欢迎在下方留言,觉得的可以的话点个赞喔,ღ( ´・ᴗ・` )

vue微信登录:vue 微信登录(使用了vant)_余温无痕的博客-CSDN博客

vue+vant商品列表批量倒计时:vue+vant商品列表批量倒计时_余温无痕的博客-CSDN博客_vant 封装

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 获取微信定位经纬度,并调用高德地图解析出详细地址 的相关文章

  • 农村水利水电与水土保持

    授课 福师大张思鹏sunnyact 泉舟时代 主要内容 简介 做出一款能实时通报水利水电与水土相关的并能及时发送到指定相关人员手机短信 思路 通过水利局农村水利水电与水土保持处官网参考 百度脑图分享 https naotu baidu co
  • Docker容器如何连接网络+容器间网络互通+Docker网络模式+自定义网络+网络打通

    Docker网络 问题 Docker容器如何连接网络 Docker容器之间能否接通网络 Docker容器之间可以通过名称ping通吗 能否自定义一个网络 那么 我们带着几个问题来学习docker的网络 Docker容器是如何连接网络的 我们

随机推荐

  • 焉建伟:3.30黄金今日跌破1700关口如何操作,黄金原油实时操作建议

    国际黄金行情走势分析 从昨日盘整近2周的箱体破位之后黄金的行情就非常明朗了 今日就是一个反弹做空的基调不用多想 而对于长期的横盘整理之后出现破位方向明朗了 点位就并不是那么重要 今天这个行情很多人可能都在等着1716 17附近去参与空单 事
  • 在Java中以编程方式将PSB转换为PDF,JPG或PSD

    PSB Photoshop Big 文件扩展名用于存储与图形有关的大量信息 可以使用Java编程语言轻松地将PSB文件转换为PDF JPG或PSD格式 让我们学习以下各节以探讨PSB文件转换 使用Java以编程方式将PSB转换为PDF 使用
  • 51单片机之蜂鸣器模拟钢琴(代码详解)——起风了

    目录 前言 正文 乐理 程序 补充 前言 最近心血来潮 想要用蜂鸣器播放音乐 全损音质 于是最初的想法诞生了 但是我总不能每次想听歌都敲一遍蜂鸣器的代码吧 有没有什么办法只需要敲一遍的代码便可以实现听歌自由呢 相对自由 也就是每次写歌只需要
  • 数据清洗和特征选择

    数据清洗和特征选择 数据清洗和特征挖掘的工作是在灰色框中框出的部分 即 数据清洗 gt 特征 标注数据生成 gt 模型学习 gt 模型应用 中的前两个步骤 灰色框中蓝色箭头对应的是离线处理部分 主要工作是 从原始数据 如文本 图像或者应用数
  • File格式转换MultipartFile格式的四种方式例子

    可以看到MultipartFile是个接口 转成MultipartFile格式则需要转成实现MultipartFile接口的实现类即可 如下选择转成用MockMultipartFile实现 首先 需要先引入依赖包
  • 链表常用函数总结

    创建单链表 PNODE creat list int len int i int val PNODE pHead NULL pHead PNODE malloc sizeof NODE if NULL pHead printf 分配内存失败
  • 电子计算机是采用什么进制法,计算机内部使用什么进制

    计算机内部采用二进制来表示信息 cpu的位是指一次性可处理的数据量是多少 1字节 8位 32位处理器可以一次性处理4个字节的数据量 也就是32位二进制 二进制是计算技术中广泛采用的一种数制 二进制数据是用0和1两个数码来表示的数 拓展资料
  • QT+OpenGL——GLFW编译配置

    环境 Qt5 8 0 VS2015 1 下载glfw源码 地址 https www glfw org download html 2 下载cmake工具 地址 http www cmake org cmake resources softw
  • Linux查看硬盘挂载

    目录 1 查看磁盘情况是否挂载上 2 在指定的硬盘上创建分区 3 设置开机自动挂载分区 1 查看磁盘情况是否挂载上 df h 该命令会显示出挂载磁盘和挂载点 下图分别是系统盘 以及挂载的一个硬盘 dev sda1 若某个磁盘没有挂载上 可以
  • WEBSHELL管理工具流量特征——基础篇

    前言 前一阵子帮别人做取证题目 有很多关于WEBSHELL的流量要分析 想起来还有没好好分析过于是准备写篇文章总结一下帮助大家能够快速的辨别WEBSHELL流量 下面我们展开文章来讲 中国菜刀 这个应该是大家最熟悉的WEBSHELL管理工具
  • 库存系统难破题?且看京东到家如何破

    京东到家库存系统架构设计 目前 京东到家库存系统经历两年多的线上考验与技术迭代 现服务着万级商家十万级店铺的规模 需求的变更与技术演进 我们是如何做到系统的稳定性与高可用呢 下面将会给你揭晓答案 库存系统技术架构图 上图如果进行总结下 主要
  • 《Windows server 2019操作系统》搭建各种服务器综合运用

    搭建域服务器 要求主域名为wgzj com IP地址为192 168 1 200 主机名为sever 搭建DNS服务器 并创建正向查找区域和反向查找区域 搭建FTP服务器 主目录为C wwwroot 搭建Web服务器 主目录为C wwwro
  • 单点登录的简单实现

    1 什么是单点登陆 单点登录 Single Sign On 简称为 SSO 是目前比较流行的企业业务整合的解决方案之一 SSO的定义是在多个应用系统中 用户只需要登录一次就可以访问所有相互信任的应用系统 较大的企业内部 一般都有很多的业务支
  • 机器学习——高斯朴素贝叶斯 Gaussian naive bayes

    问 高斯朴素贝叶斯假设离散特征的取值符合高斯分布 答 错误 高斯朴素贝叶斯假设连续特征的取值符合高斯分布 而不是离散特征 对于离散特征 通常使用多项式朴素贝叶斯或伯努利朴素贝叶斯进行分类 在 sklearn 库中 基于贝叶斯定理的算法集中在
  • win10 自带的远程桌面控制 ubuntu,不是补全

    win10 远程桌面控制ubuntu tab 不能补全 的解决方案 默认 tab 是窗口切换功能 方法有两个 在ubuntu中或者远程桌面中 编辑 config xfce4 xfconf xfce perchannel xml xfce4
  • TCP/IP详解学习笔记1

    为什么会有TCP IP协议 在世界上各地 各种各样的电脑运行着各自不同的操作系统为大家服务 这些电脑在表达同一种信息的时候所使用的方法是千差万别 就好像圣经中上帝打乱了各地人的口音 让他们无法合作一样 计算机使用者意识到 计算机只是单兵作战
  • mciSendString的介绍

    转载至 http blog sina com cn s blog 149e9d2ec0102wzcn html 使用MCI API 源文件中需要包含头文件Mmsystem h 在Project gt Settings gt Link gt
  • Windows 10 自带录制工具

    从知乎上学来的 Windows 10上自带的游戏录制工具 按Win G呼出 可录制游戏和任何一个桌面程序 可以截屏 不能控制录制的质量 录制出来的视频大小适中 只能录制一个程序 切换程序会导致录制停止 输出格式是mp4 视频编码H 264
  • sqlplus连接、登录命令大全(选择实例登录、连接远程数据库实例等等)

    1 默认实例登录 sqlplus username password 如 sqlplus tas yn tas yn 2 选择实例登录 sqlplus username password net service name 如 sqlplus
  • vue 获取微信定位经纬度,并调用高德地图解析出详细地址

    第一步 安装weixin js sdk 命令 npm i S weixin js sdk 或者 npm install weixin js sdk 第二步 在需要的地方引用 import wx from weixin js sdk 第三步