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 相关文章推荐
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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
mayfish 数据入库验证代码
2010/04/30 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JS backgroundImage控制
2009/05/19 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python中格式化字符串的四种实现
2020/05/26 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
好邻里事迹材料
2014/01/16 职场文书
矿泉水广告词
2014/03/20 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
进口业务员岗位职责
2014/04/06 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
服务理念标语
2014/06/18 职场文书
2016春节家属慰问信
2015/03/25 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript