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对象的三个方法小结
Jan 12 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
关于js datetime的那点事
2011/11/15 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python join方法使用详解
2019/07/30 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
python 如何快速复制序列
2020/09/07 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
小学生暑假感言
2014/02/06 职场文书
家长会欢迎标语
2014/06/24 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python