Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解


Posted in Javascript onAugust 26, 2019

前言:

前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离。因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候相差的比较的大,后来了解到了百度获取用户经纬度与用户当前使用的网络有很大的关系),后来换成了高德地图结果还是一样。最后我想刚好做的是个微信网站项目,为什么不使用微信自带接口呢?所以最后使用了微信JS-SDK来获取用户当前地理位置的接口。

微信JS-SDK的使用步骤,配置信息的生成获取讲解:

关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在此:https://www.cnblogs.com/Can-daydayup/p/11124092.html

前往微信公众平台查看是否开通获取用户地理位置接口权限:

Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

调用微信JS-SDK获取地理位置接口,获取用户当前准确经纬度坐标:

微信官方文档使用说明:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#35

< script type = "text/javascript" >
//通过config接口注入权限验证配置
wx.config({
  debug: false,
  // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: 'your AppId',
  // 必填,公众号的唯一标识
  timestamp: 'your timestamp',
  // 必填,生成签名的时间戳
  nonceStr: 'your nonceStr',
  // 必填,生成签名的随机串
  signature: 'your signature',
  // 必填,签名
  jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表
});

//注意,我们的经纬度坐标是要在页面加载完成后立即获取,不需要触发获取,因此需要把获取地理位置的接口放在ready(function(){});里面
wx.ready(function() {
  try {
    wx.getLocation({
      type: 'wgs84',
      // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
      success: function(res) {

        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        $("#Longitude").val(longitude);
        $("#Latitude").val(latitude);
        alert("微信经纬度获取结果:" + latitude + "经度" + longitude);
      }
    });
  } catch(e) {
    console.log(e);
  }
}); < /script>/

授权公众号,获取当前地理位置:

Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木

Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
javascript实现抢购倒计时程序
Aug 26 #Javascript
VUE路由动态加载实例代码讲解
Aug 26 #Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 #Javascript
vue-router路由模式详解(小结)
Aug 26 #Javascript
vue+moment实现倒计时效果
Aug 26 #Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 #Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
You might like
提问的智慧
2006/10/09 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
python 自动提交和抓取网页
2009/07/13 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python ansible服务及剧本编写
2017/12/29 Python
python实现微信小程序自动回复
2018/09/10 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python输出决策树图形的例子
2019/08/09 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python生成器常见问题及解决方案
2020/03/21 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python下载的11种姿势(小结)
2020/11/18 Python
python 实现性别识别
2020/11/21 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
详解pytorch创建tensor函数
2022/03/22 Python