Net微信网页开发使用微信JS-SDK获取当前地理位置过程详解

2024-09-28 01:20:09

前言：

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

授权公众号，获取当前地理位置：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们

详解基于Node.js的微信JS-SDK后端接口实现代码

做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分享可以自定义内容,如下: 我承认,虽然这分享的标题和内容也并不正经,但这不妨碍我表达我们可以通过微信JSSDK定义分享内容,接下来我们将一步一步从零实现JSSDK从后端Node.js的接入. 成为测试公众号开发者登录测试公众号后台首先我们需要在微信公众平台申请测试接口,地址:https://mp
微信JS-SDK选取手机照片上传功能

项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发.实际开发中需要用到微信web开发者工具,详细参考链接:https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html. 1.配置微信JS-SDK相关文件 1).JSSDk使用最新的1.2.0版本:https://res.wx.qq.com/open/js/jweixin-1.2.0.js.
浅谈微信JS-SDK 微信分享接口开发（介绍版）

本文主要是分享自己的开发过程,希望能给部分存在同样问题的朋友一点点帮助: 最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息,后经过排查发现是微信版本升级导致,采用js-sdk完成分享接口,为了快速实现该功能效果,于是我打算通过前台js进行实现来看看分享效果. 通过查看微信公众平台文档,找到自己所需要的说明文档,明确开发步骤,说明文档截图如下: 开发步骤: 1.按照说明文档完成步骤1.1.1 2.引入js文件在分享的页面中添加js文件 <script src="h
微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

主要为以下实现步骤: 1.绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://res.wx
微信js-sdk地理位置接口用法示例

本文实例讲述了微信js-sdk地理位置接口用法.分享给大家供大家参考,具体如下: 前提,已经在wx.config()中权限验证通过,官方文档地址官方api 使用微信内置地图查看位置接口 wx.openLocation({ latitude: 0, // 纬度,浮点数,范围为90 ~ -90 longitude: 0, // 经度,浮点数,范围为180 ~ -180. name: '', // 位置名 address: '', // 地址详情说明 scale: 1, // 地图缩放级别,整形值,
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &
解析微信JS-SDK配置授权，实现分享接口

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据
微信js-sdk上传与下载图片接口用法示例

本文实例讲述了微信js-sdk上传与下载图片接口用法.分享给大家供大家参考,具体如下: 前提已经在wx.config()中,将图片接口验证通过. 微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的.以官方文档为准注: 1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx 2.上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 medi
Net微信网页开发使用微信JS-SDK获取当前地理位置过程详解

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

微信小程序引用公共js里的方法的实例详解一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
Nest.js快速启动API项目过程详解

目录快速启动使用nest自带的命令行工具直接使用starter项目用npm安装所需的包创建controller 创建service 结构和命名 HTTP请求处理Axios对象配置全局添加headers API文档快速启动最近上了一个新项目,这个客户管理一个庞大的任务和团队集群,而不同流程所适用的系统也不太一样,比如salesforce,hubspots之类的.这次的新项目需要在另外两个平台之间做一些事情.目前只需要先封装其中之一的API,因此我们选定使用NodeJS的框架Ne
微信小程序调用天气接口并且渲染在页面过程详解

前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo. 先上效果开始写代码: 1:找打一个免费的天气接口免费接口api: https://www.apiopen.top/api.html#top https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%
基于Node.js搭建hexo博客过程详解

一.安装新版本的nodejs和npm 安装n模块: npm install -g n 升级node.js到最新稳定版 n stable 二.安装hexo note: 参考github,不要去其官网安装Hexo npm install hexo-cli -g Setup your blog hexo init blemesh cd blemesh 安装Cactus主题,众多开源主题中比较简洁的一个: 主题页 Cactus页 git clone https://github.com/probber
js变量值传到php过程详解将php解析成数据

一.总结一句话总结:传参数去后台,用ajax,或者原生js方式拼接url.明白原理,洞悉系统是先解析php,再执行html代码和js代码. 二.用ajax 1. 页面提交数据: ajax 2. php页面获取参数: $val = $_POST['val'] 参考代码(jquery): $.ajax({ type: 'POST', url: 'save.php', data: {val: text1obj.value} success: function(msg){ // msg: php返回内
vue.js从安装到搭建过程详解

最初的时候用vue是直接下载相关文件按照以前的方法来操作的后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像打开命令行输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹用于存放项目文件 cd 进入你
php实现网页上一页下一页翻页过程详解

前言这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码大致功能就是页面只显示几条信息,按上一页.下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页和尾页选项不可选具体效果如下: 实现代码 1)原生PHP方法先说一下总思路吧,首先我们要查询所有符合条件需要进行分页的总数据,计算展示的总页数. 然后获取当前显示的是第几页信息,用当前页数每页数据条数表示为总数据的第几条,再根据限制条件查询出当前页所需显示出来的数据.将每一条数据echo替
js 实现ajax发送步骤过程详解

js发送ajax发送,分步骤进行 ajax的核心是XMLHttpRequest, 步骤1:创建一个对象xmlrequest,在主流的浏览器都支持new , var xmlhttp = new XMLHttpRequest() IE浏览器不支持这种方法,需要再写一个函数来创建步骤2 :连接服务端得到XMLHTTPRequest对象后,就可以调用对象的open()方法,与服务器连接,参数如下 open(method,url,async): method:请求方法GET或POST, url:服务
微信企业号开发之微信考勤Cookies的使用

在上篇文章给大家介绍了微信企业号开发之微信考勤百度地图定位,接下来通过本文学习微信企业号开发之微信考勤Cookies的使用,具体内容如下. 使用微信考勤,每次使用微信企业号开发:微信用户信息和web网页的session的关系这个里边的方法,调用微信的接口,有点慢,微信官方也推荐使用Cookies,但如何使用Cookies,自己却一直没有搞清楚. 原来一直以为在服务端获取客户端的数据有两个方法,一种就是查询字符串放在URL上,一种就是放在form中,post提交,自己以前也使用过但主要是在客户端使

Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解

相关推荐

随机推荐

Net微信网页开发使用微信JS-SDK获取当前地理位置过程详解