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>

授权公众号,获取当前地理位置:

原文地址:https://www.cnblogs.com/Can-daydayup/p/11412169.html

时间: 2024-10-29 04:07:16

Net微信网页开发之使用微信JS-SDK获取当前地理位置的相关文章

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

前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. 第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在这里:https://www.cnblogs.com/Can-d

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

通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是传统Web以及现代H5开发的核心. 我们今天进行<10天学会phpWeChat>教程的最后一讲,phpWeChat的微信网页开发.在这一讲里,我们将重点讲解在微信网页开发中几个常见参数的获取和一个微信扫一扫的实例. 一.微信网页开发中的几个重要参数(文档参考:https://mp.weixin.q

微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3  3.2节文件结构 另外,提醒读者一下,wxJSSDK.js文件的JSSDK环境配置中,需要更改一下配置参数,代码如下: 01 jsApiList: [ // 其他代码略 02 "onMenuShareTimeline", 03 "onMenuShareAppMessage", 04 "onMenuShareQQ&q

python 微信开发入门篇-调用JS SDK 含微信支付(二)

本章节完成微信js sdk + 微信支付调用,项目基础部分请参照入门篇第一章:https://www.cnblogs.com/wangcongxing/p/11546780.html 1.微信服务号设置    登录服务号后台设置如下: 1.登录地址:https://mp.weixin.qq.com/ 2.设置-->公众号设置-->功能设置 设置后结果如下 2.微信商户后台设置 登录微信支付平台设置如下: 1.登录地址(因为需要安装exe插件, 设置浏览为兼容模式  建议使用QQ浏览器):htt

微信网页开发实践与总结

最新项目需要,开发微信端应用,用到微信生成菜单访问web应用,实际开发中一些技巧与大家分享,不足之处,欢迎交流指正! 一:注册微信开发测试账号 微信企业号申请比较繁琐,好找有微信测试账号,几乎可以开发微信全部的API 访问地址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 微信扫描登录即可 此时你会得到一个appID 和 appsecret 二:配置外网服务器    微信开发,必须将项目部署到外网并且端口必须为80,这

微信网页开发

微信网站一般是先要微信网页授权后获取到access_token,才有资格获取用户信息的,所以如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 第一步是先获取用户授权(具体的请看微信开发者文档): 授权也分两种:静态授权和手动授权: 关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调页(往

微信企业号开发[三]——调用微信接口

微信的所有主动调用都需要带上AccessToken,以下我们将讲解如何获取AccessToken 获取AccessToken AccessToken是企业号的全局唯一票据,调用接口时需携带AccessToken. AccessToken需要用CorpID和Secret来换取,不同的Secret会返回不同的AccessToken.正常情况下AccessToken有效期为7200秒,有效期内重复获取返回相同结果.access_token至少保留512字节的存储空间. 请求说明 Https请求方式:

微信支付开发:开通微信免充值代金券和开通微信免充值立减与折扣,申请微信免充值代金券,接口升级验收步骤

功能介绍: 商户不需要预先充值营销经费,即可创建和激活免充值代金券活动.活动生效后,用户到店使用微信支付,当订单符合优惠规则时,会直接扣减核销优惠商户的订单实收金额. 免充值,营销资金"0"占用不需要预充值营销经费,即可创建代金券优惠活动.优惠金额从商户订单实收金额中扣减. 免开发,免费使用微信支付提供基础防刷.对账.下载消耗记录等基础功能.不需要商户开发,也不收取手续费. 可自定义活动标题.减价面额.减价门槛.可用商户.预算.用户领取次数限制,也可以配置指定会员可用.指定某些商品享受

微信网页开发没有备案域名怎么办?【仅供线下测试使用】

大家都知道微信JS-SDK使用第一步就是绑定“JS接口安全域名”, 微信明确规定填写的域名须通过ICP备案的验证. 但是很多像我这样的普通程序员就只是想学习学习微信开发,只需要在局域网能可以玩就行了, 根本不需要服务器,更何况网站备案呢. 所以接下来介绍一种本地开发微信,手机局域网内的可以使用调试的配置. 本地环境:Windows系统+IIS部署网站 按照JSSDK使用步骤开始(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421