Net微信网页开发之使用微信JS-SDK获取当前地理位置
前言:
前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离。因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候相差的比较的大,后来了解到了百度获取用户经纬度与用户当前使用的网络有很大的关系),后来换成了高德地图结果还是一样。最后我想刚好做的是个微信网站项目,为什么不使用微信自带接口呢?所以最后使用了微信JS-SDK来获取用户当前地理位置的接口。
微信JS-SDK的使用步骤,配置信息的生成获取讲解:
关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在此:https://www.cnblogs.com/Can-daydayup/p/11124092.html
前往微信公众平台查看是否开通获取用户地理位置接口权限:


调用微信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获取当前地理位置的更多相关文章
- .Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能
前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. ...
- .Net微信网页开发之使用微信JS-SDK自定义微信分享内容
第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token ...
- 10天学会phpWeChat——第十天:phpWeChat的会员注册、登录以及微信网页开发
通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是 ...
- 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
- 微信开发+百度AI学习:微信网页开发环境搭建
参考微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 两步即可获取微信网页开发能力 STEP1: ...
- 微信网页授权封装接口——node.js版
Wechat 网页授权 授权url:(请在微信客户端中打开此链接体验) xxx为config.js中的WECHAT_DOMAIN 1.scope为snsapi_base xxx/?route=auth ...
- 微信网页开发之创建Controller(三)
首先,我们需要在App区域下添加一个控制器,这里我们就以AppDemoController为例.如下图所示: 注意:你也可以自己创建其他区域,只是这里推荐使用App区域. 创建好之后,请添加自己的Ac ...
- 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别
假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...
- 微信测试号开发之九 微信网页授权:页面获取用户openid
原文链接:https://blog.csdn.net/qq_37936542/article/details/78981369 一:配置接口 注意:这里填写的是域名(是一个字符串),而不是URL,因此 ...
随机推荐
- Excel催化剂开源第5波-任务窗格在OFFICE2013中新建文档不能同步显示问题解决
在OFFICE2013及之后,使用了单文档界面技术,不同于以往版本可以共享任务空格.功能区.所以当开发任务窗格时,需要考虑到每一个工作薄都关联一个任务窗格. 背景介绍 单文档界面摘录官方定义如下:对 ...
- AndroidStudio使用genymotion模拟器
安装Genymotion之前首先要安装好virtualbox这个软件 virtual官方网站:https://www.virtualbox.org/ genymotion的官方网站: https:// ...
- [leetcode] 63. Unique Paths II (medium)
原题 思路: 用到dp的思想,到row,col点路径数量 : path[row][col]=path[row][col-1]+path[row-1][col]; 遍历row*col,如果map[row ...
- 如何在Windows上使用Python进行开发
本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 一直以来C#都是微软在编程语言方面最为显著的Tag,但时至今日Python ...
- Openstack中用keypair生成和访问虚机的方法
Openstack中用keypair生成和访问虚机的方法 标签:task iso perm cte 生成 复制 vol rsa sla Openstack中用镜像文件生 ...
- UPC Contest RankList – 2019年第二阶段我要变强个人训练赛第十四场
A.JOIOJI •传送门 [1]:BZOJ [2]:洛谷 •思路 在一个区间(L,R]内,JOI的个数是相等的,也就是R[J]-L[J]=R[O]-L[O]=R[I]-L[I], 利用前缀和的思想, ...
- JAVA遍历机制的性能的比较
本文首发于cartoon的博客 转载请注明出处:https://cartoonyu.github.io/cartoon-blog/post/java/java%E9%81%8D%E5% ...
- 基础算法和数据结构高频题 II
DFS的两种理解方式:1. 按照实际执行顺序模拟 (适合枚举型DFS,下节课内容)2. 按照DFS的定义宏观理解 (适合分治型DFS,本节课内容) 1 Convert BST to Greater T ...
- springBoot综合开发
作者:纯洁的微笑出处:www.ityouknow.com 版权所有,欢迎保留原文链接进行转载:) 上篇文章介绍了Spring boot初级教程:spring boot(一):入门篇,方便大家快速入门. ...
- RFC 2544 性能测试
什么是RFC 2544?网络设备性能测试的一组指标,包括吞吐率.时延.丢包率.背靠背. * * * 吞吐率(Throughput). 定义:被测设备在不丢包的情况下,所能转发的最大数据流量.通常使用每 ...