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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
什么是serialVersionUID
2016/03/04 面试题
爱情寄语大全
2014/04/09 职场文书
中文专业自荐书
2014/06/29 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
财务会计岗位职责
2015/02/03 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
Redis 限流器
2022/05/15 Redis