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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
js自定义select下拉框美化特效
May 12 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
JS学习笔记之闭包小案例分析
May 29 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 表单数据的获取代码
2009/03/10 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php源码的使用方法讲解
2019/09/26 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python 函数基础知识汇总
2018/03/09 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
高中毕业自我评价
2014/02/08 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
党课培训心得体会
2014/09/02 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015年电工工作总结
2015/04/10 职场文书
小学运动会通讯稿
2015/07/18 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js