专栏首页追逐时光Net微信网页开发之使用微信JS-SDK获取当前地理位置

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hello React

      至此,Mac环境下react基于脚手架的开发环境已搭建完成。运行项目( npm start)后,浏览器会自动打开本地页面http://localhost:3...

    流眸
  • CSS基础知识

    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。使...

    公众号php_pachong
  • Web 开发会用到的20款优秀的开源工具

    很多的开源应用程序和工具都有很强的替代性。相对于其他昂贵的工具来说,开源工具兼容性比较好,并且他们是免费的。这样开发人员在进行日常的工作时便可以不花钱就可以获得...

    用户4962466
  • 最全的机器学习入门资料

    可汗学院,是由孟加拉裔美国人萨尔曼·可汗创立的一家教育性非营利组织,主旨在于利用网络影片进行免费授课。

    猴子聊数据分析
  • 百度收录查询有哪些渠道 快速收录方法汇总

    运营人员每天必须做的一项工作就是查询百度收录,百度收录是网站SEO的一个基础指标,它从侧面反馈网站内容质量的优劣。百度收录查询有三个渠道,安邦运维也有一些快速收...

    安邦运维ruangseo
  • web 使用 HTML5 可以做的五件很棒的事情

    HTML5 如今已被应用得非常广泛,特别是在移动端。作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,它可以说是近十年来 Web 标准最巨大的飞跃...

    用户4962466
  • 别再造假数据了,来试试 Faker 这个库吧!

    在做程序开发的时候,我们经常会用到一些测试数据,相信大多数同学是这么来造测试数据的:

    崔庆才
  • Python绘制气象实用地图(附代码和测试数据)

    前面的推文对于常用的Python绘图工具都有了一些介绍,在这里就不赘述了。本文主要就以下几个方面:“中国区域绘图”、“包含南海”、“兰伯特投影带经纬度标签”、“...

    zhangqibot
  • 快速修改bootstrap

    Bootstrap并不是单单意味着HTML/CSS界面框架,更确切的说,它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许...

    公众号php_pachong
  • 前端开发规范

    省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券