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

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

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

时间: 2019-08-24

浅谈微信JS-SDK 微信分享接口开发(介绍版)

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

微信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(); ?> &

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

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

微信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 提供的选取照片功能,来进行项目开发.实际开发中需要用到微信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+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面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.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

js实现上传并压缩图片效果

本文实例为大家分享了js实现上传并图片压缩的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

js判断上传文件的类型和大小示例代码

复制代码 代码如下: //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))) { alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection d

WebApi2 文件图片上传与下载功能

Asp.Net Framework webapi2 文件上传与下载 前端界面采用Ajax的方式执行 一.项目结构 1.App_Start配置了跨域访问,以免请求时候因跨域问题不能提交.具体的跨域配置方式如下,了解的朋友请自行略过. 跨域配置:NewGet安装dll Microsofg.AspNet.Cors 然后在App_Start 文件夹下的WebApiConfig.cs中写入跨域配置代码. public static class WebApiConfig { public static vo

spring boot实现图片上传和下载功能

这篇博客简单介绍下spring boot下图片上传和下载,已经遇到的问题.首先需要创建一个spring boot项目. 1.核心的controller代码 package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf

微信小程序学习笔记之文件上传、下载操作图文详解

本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun

微信小程序之批量上传并压缩图片的实例代码

具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取 这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da

Android实现相册中图片上传或下载

本文实例为大家分享了Android实现相册中图片上传或下载的具体代码,供大家参考,具体内容如下 目标效果: 打开相册选择一张图片,会显示到上方的ImageView中并存储到Bmob中,存储后进入Bmob后台,复制刚才添加的数据的objectId,粘贴到代码指定出,然后运行,点击下载会在下方的ImageView显示刚才上传的图片,这里的下载是指定objectId,可以进行动态获取objectId进行下载. 1.activity_main.xml页面设置布局. activity_main.xml页面

Android编程实现图片的上传和下载功能示例

本文实例讲述了Android编程实现图片的上传和下载功能.分享给大家供大家参考,具体如下: 在实现一个Android的WEB服务客户端,比如微博,论坛客户端时,经常会使用到图片的上传和下载.在这里介绍如何利用HttpClient实现图片的上传和下载功能. 1 图片上传:上传图片时,首先获得图片的路径,创建文件,并将图片转化为字节流写入到request,并发送该请求. 客户端代码: File file = new File(imageUrl); String httpUrl = httpDomai

JS中使用FormData上传文件、图片的方法

关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F