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的倒计时实现代码
May 30 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP静态成员变量
2017/02/14 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
js 省地市级联选择
2010/02/07 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
python网络编程实例简析
2014/09/26 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python中装饰器高级用法详解
2017/12/25 Python
详解Python用户登录接口的方法
2019/04/17 Python
创建Django项目图文实例详解
2019/06/06 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
什么是serialVersionUID
2016/03/04 面试题
幼儿园教师自我鉴定
2014/03/20 职场文书
成本会计实训报告
2014/11/05 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
幼儿园六一主持词
2015/06/30 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android