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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
document.forms用法示例介绍
Jun 26 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
vue3.0实现插件封装
Dec 14 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 $_ENV为空的原因分析
2009/06/01 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php 删除cookie方法详解
2014/12/01 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
web前端开发也需要日志
2010/12/09 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
python统计日志ip访问数的方法
2015/07/06 Python
python实现Decorator模式实例代码
2018/02/09 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
工地资料员岗位职责
2013/12/31 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
出生公证书样本
2014/04/04 职场文书
信息技术研修心得体会
2016/01/08 职场文书
八年级英语教学反思
2016/02/15 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle