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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
JavaScript对象属性操作实例解析
Feb 04 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调用数据库的存贮过程!
2006/10/09 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
session 加入redis的实现代码
2016/07/15 PHP
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
python 对象和json互相转换方法
2018/03/22 Python
python实现爬山算法的思路详解
2019/04/09 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
中学生运动会新闻稿
2014/09/24 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
小学生运动会广播
2015/08/19 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
解决MySQL报“too many connections“错误
2022/04/19 MySQL