首页 > 其他分享 >.NET微信网页开发之使用微信JS-SDK获取当前地理位置

.NET微信网页开发之使用微信JS-SDK获取当前地理位置

时间:2024-09-01 08:52:41浏览次数:13  
标签:必填 经纬度 微信 接口 JS 获取 NET

前言

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

微信JS-SDK的使用步骤,配置信息的生成获取讲解

关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在此:

https://www.cnblogs.com/Can-daydayup/p/11124092.html

前往微信公众平台查看是否开通获取用户地理位置接口权限:

调用微信JS-SDK获取地理位置接口,获取用户当前准确经纬度坐标:

微信官方文档使用说明:概述 | 微信开放文档

<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>

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

标签:必填,经纬度,微信,接口,JS,获取,NET
From: https://blog.csdn.net/qq_37237487/article/details/141760967

相关文章

  • 第146篇:响应式动态居中(js+css,vue)
    好家伙, 1.使用js原生<divid="container"style="position:relative;width:100%;height:100vh;"><divid="hero"style="position:relative;"></div></div><script>consthero=doc......
  • 一个.NET开源、现代、轻量级的文本编辑器
    前言今天大姚给大家分享一个.NET开源、免费(MITLicense)、现代、轻量级、具有极简主义设计的文本编辑器:Notepads。项目特点设计:采用Fluent设计语言,内置选项卡系统。性能:启动迅速,占用资源少。兼容性:支持从命令行或PowerShell启动。功能丰富:支持多行手写、Markdown实时预览、差异查看......
  • js常见的报错
    1.UncaughtTypeError:Cannotreadproperty''ofundefined 常见的一种是在渲染UI组件时对于状态的初始化操作不当,当你读取一个未定义的对象的属性或调用其方法时,这个错误会在Chrome中出现。2.TypeError:‘undefined’isnotanobject 这是在Safari中读取属性或调......
  • springboot微信点餐系统(11041)
     有需要的同学,源代码和配套文档领取,加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码(前后端源代码+SQL脚本)配套文档(LW+PPT+开题报告)远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发......
  • js变量命名的规则和规范
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • JS如何通过视频链接获取视频时长
    在JavaScript中,获取视频链接的视频时长通常涉及到创建一个<video>元素,将视频链接设置为该元素的src属性,然后监听视频的loadedmetadata事件,该事件在视频的元数据(包括时长)加载完成后触发。以下是一个基本的示例://视频链接constvideoUrl='你的视频链接';//创建一个video元素......
  • 分享一个js 抢红包随机算法,其他语言思路也一样
    直接调用这个方法就行传递q(金额)和r(人数就行)保证人均最少一分钱当剩余金额大于80%的时候,会在金额20%的区间内取大红包随机分配;基础分配规则为,按照每人可以随机5次的要求,得出每次随机的金额,随机分给其中一人functionfen(q,r){//q=红包金额单位元,最小0.01r=分配人数if......
  • Vue期末考试速成复习指南附编程题(js开发基础+路由+Pinia)
    前文:本文参考书籍《Vue.js前端开发实战(第二版)》--黑马程序员/编著重点在于本科期末速成和0基础入门目录:一.初识Vue1.包管理工具:npmyarn2.创建Vue项目二.js开发基础1.什么是单文件组件?2.单文件组件基本结构3.切换页面显示组件3.数据绑定与输出4.Vue引入Html页面5.......
  • 微信小程序通知(公众号)
    //调用$this->accessToken($code,$title,$amount,date('Y-m-dH:i:s',time()));/**获取access_token*$code前端传过来*$title=标题*$amount=金额*$time=时间*/protectedfunctionaccessToken($code='',$tit......
  • 基于asp.net的小区物业管理系统附完整源码
    今天给大家分享一个小区物业管理系统,希望对大家的学习有所帮助1.主要功能该系统的主要功能包含三个角色,管理员、员工、业主,主要功能包含用户管理、车位管理、业主管理、数据库备份、个人中心、密码修改、报修管理、物业费管理、用户注册登录等等模块。2.开发工具及其......