前言:

  前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离。因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候相差的比较的大,后来了解到了百度获取用户经纬度与用户当前使用的网络有很大的关系),后来换成了高德地图结果还是一样。最后我想刚好做的是个微信网站项目,为什么不使用微信自带接口呢?所以最后使用了微信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获取当前地理位置的更多相关文章

  1. .Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能

    前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. ...

  2. .Net微信网页开发之使用微信JS-SDK自定义微信分享内容

    第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token ...

  3. 10天学会phpWeChat——第十天:phpWeChat的会员注册、登录以及微信网页开发

    通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是 ...

  4. 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)

    1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...

  5. 微信开发+百度AI学习:微信网页开发环境搭建

    参考微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 两步即可获取微信网页开发能力 STEP1: ...

  6. 微信网页授权封装接口——node.js版

    Wechat 网页授权 授权url:(请在微信客户端中打开此链接体验) xxx为config.js中的WECHAT_DOMAIN 1.scope为snsapi_base xxx/?route=auth ...

  7. 微信网页开发之创建Controller(三)

    首先,我们需要在App区域下添加一个控制器,这里我们就以AppDemoController为例.如下图所示: 注意:你也可以自己创建其他区域,只是这里推荐使用App区域. 创建好之后,请添加自己的Ac ...

  8. 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别

    假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...

  9. 微信测试号开发之九 微信网页授权:页面获取用户openid

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78981369 一:配置接口 注意:这里填写的是域名(是一个字符串),而不是URL,因此 ...

随机推荐

  1. 马蜂窝 IM 系统架构的演化和升级

    今天,越来越多的用户被马蜂窝持续积累的笔记.攻略.嗡嗡等优质的分享内容所吸引,在这里激发了去旅行的热情,同时也拉动了马蜂窝交易的增长.在帮助用户做出旅行决策.完成交易的过程中,IM 系统起到了重要的作 ...

  2. 个人永久性免费-Excel催化剂功能第42波-任意字符指定长度随机函数

    日常做表过程中,难免会有一些构造数据的场景,构造数据最好是用随机的数据,如随机密码,随机英文字母.数字等.在Excel原生的随机函数Rand中,仅能处理数字的随机,且最终生成的结果也是数字类型.今天E ...

  3. python3.x 与 python2.x 差别记录

    从2.x过渡到3.x的时候,遇到了大大小小的坑,于是便记录下来- 1.print:  3.x 所有print都要加 "( )",print更像(就是)一个函数了. 2.x 可以加& ...

  4. jenkins默认在build结束后会kill掉所有的衍生进程

    在使用jenkins进行自动化部署服务的过程中,发现调用服务器的shell命令无法正常启动tomcat,但是构建日志显示是成功执行的,而手动在服务器却是可以正常启动tomcat. 原因:jenkins ...

  5. 《C# 语言学习笔记》——定义属性

    属性定义的方式与字段类似,但包含的内容比较多. 属性拥有两个类似于函数的块,一个块用于获取属性的值,另一个块用于设置属性的值.这两个块也称访问器,分别用于get和set关键字定义,可以用于控制对属性的 ...

  6. FSCapture 取色工具(绿色版 )

    百度云: 链接:http://pan.baidu.com/s/1kV7BhVD 密码:zel3

  7. chapter01

    1.请用命令查出ifconfig命令程序的绝对路径[root@localhost ~]# which ifconfig 答:/usr/sbin/ifconfig 2.请用命令展示以下命令哪些是内部命令 ...

  8. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

  9. 关于STM32F103+ESP8266+阿里云过程之环境搭建和阿里云数据格式设置及注意点(一)

    计划实现功能:将STM32F103采集到的温湿度,PM2.5等数值,通过UART与ESP8266通讯,使得ESP8266对外仅充当串口功能的黑盒.ESP8266通过MTQQ发布订阅数据,设备上传.接收 ...

  10. Android:JNI与NDK(二)交叉编译与动态库,静态库

    欢迎关注公众号,第一时间获取最新文章: 本篇目录 一.前言 本篇主要以window开发环境为背景介绍一下NDK开发中需要掌握的交叉编译等基础知识,选window系统主要是照顾大多数读者,mac ,li ...