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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 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
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
js常用代码段收集
2011/10/28 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Django实现文件上传下载功能
2019/10/06 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
工程测量与监理专业应届生求职信
2013/11/27 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2016猴年春节问候语
2015/11/11 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python