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 31 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
vue element upload实现图片本地预览
Aug 20 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
跟我学Laravel之路由
2014/10/15 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
webpack配置的最佳实践分享
2017/04/21 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue配置接口域名方法总结
2019/05/12 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python简单分割文件的方法
2015/07/30 Python
python批量下载抖音视频
2019/06/17 Python
Django分组聚合查询实例分享
2020/04/29 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
教师师德承诺书
2014/03/26 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
简单租房协议书范本
2014/08/20 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
SQL 聚合、分组和排序
2021/11/11 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL