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 调试利器 Firebug使用详解六
Jul 05 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
js中数组常用方法总结(推荐)
Apr 09 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
用vue写一个日历
Nov 02 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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 字符转义 注意事项
2009/05/27 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
python搭建虚拟环境的步骤详解
2016/09/27 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python中的句柄操作的方法示例
2019/06/20 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
25岁生日感言
2014/01/13 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
小学数学国培感言
2014/03/10 职场文书
消防安全宣传口号
2014/06/10 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2016国庆促销广告语
2016/01/28 职场文书