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接收get传递的值的代码
Nov 30 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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简单读取PDF页数的实现方法
2016/07/21 PHP
Js动态创建div
2008/09/25 Javascript
validator验证控件使用代码
2010/11/23 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery动态添加
2016/04/07 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
Python内建模块struct实例详解
2018/02/02 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
银行实习生的自我评价
2013/12/09 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
护士求职自荐信范文
2015/03/04 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python