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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
关于layui时间回显问题的解决方法
Sep 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
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
python生成日历实例解析
2014/08/21 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
详解django.contirb.auth-认证
2018/07/16 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python气泡提示与标签的实现
2020/04/01 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
动员大会主持词
2014/03/20 职场文书
房产买卖委托公证书
2014/04/04 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年财政工作总结
2014/12/10 职场文书
继承权公证书范本
2015/01/23 职场文书
教师个人年度总结
2015/02/11 职场文书
高中运动会前导词
2015/07/20 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python