微信开发：对接JS-SDK微信内置地图获取当前位置

Posted 2023-04-01 普通网友

nonceStr : data.noncestr,//生成签名的随机字符串

signature : data.signature,//签名

jsApiList : [//需要调用的JS接口列表

‘chooseImage’, ‘uploadImage’, ‘downloadImage’,

‘previewImage’, ‘openLocation’, ‘getLocation’,

‘scanQRCode’, ‘checkJsApi’, ‘onMenuShareTimeline’,

‘onMenuShareAppMessage’, ‘onMenuShareQQ’,

‘onMenuShareWeibo’, ‘onMenuShareQZone’

]

);

,

error : function(xhr, status, error)

//alert(status);

//alert(xhr.responseText);

);

wx.ready(function()

if (zt == ‘0’)

wx.getLocation(

type : ‘wgs84’, // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入’gcj02’

success : function(res)

var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90

var longitude = res.longitude; // 经度，浮点数， 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 范围为180 ~ -180。

var speed = res.speed; // 速度，以米/每秒计

var accuracy = res.accuracy; // 位置精度

$.ajax(

type : “post”,

url : “vip_wxsdk_dingwei”,//获取经度，纬度

data :

“latitude” : latitude,

“longitude” : longitude

,

dataType : “json”,

success : function(data)

if (data = “success”)

zt = 1;

);

);

);

);

(3.1) vip_wxsdk_config方法：

@ResponseBody

@RequestMapping(“vip_wxsdk_config”)

public Map<String, Object> vip_wxsdk_config(Model model, Wx wx, HttpSession session, String url)

wx = wxService.selectByPrimaryKey(1);

// 1、获取AccessToken

String jsapi_ticket = “”;

String accessToken = “”;

if (session.getAttribute(Constants.jsapi_ticket) != null)

jsapi_ticket = session.getAttribute(Constants.jsapi_ticket).toString();

else

accessToken = CommonUtil.getToken(wx.getWxAppid(), wx.getWxAppsecret()).getAccessToken();

// 2、获取Ticket

jsapi_ticket = CommonUtil.getTicket(accessToken);

session.setAttribute(Constants.jsapi_ticket, jsapi_ticket);

// 3、时间戳和随机字符串

String noncestr = AdvancedUtil.getNonceStr();

String timestamp = Sha1Util.getTimeStamp();

// System.out.println(“accessToken:”+accessToken+“\\njsapi_ticket:”+jsapi_ticket+“\\n时间戳：”+timestamp+“\\n随机字符串：”+noncestr);

// 5、将参数排序并拼接字符串

String str = “jsapi_ticket=” + jsapi_ticket + “&noncestr=” + noncestr + “&timestamp=” + timestamp + “&url=” + url;

// 6、将字符串进行sha1加密

String signature = SHAUtils.SHA1(str);

map = new HashMap<String, Object>();

map.put(“appid”, wx.getWxAppid());

map.put(“accessToken”, accessToken);

map.put(“jsapi_ticket”, jsapi_ticket);

map.put(“timestamp”, timestamp);

map.put(“noncestr”, noncestr);

map.put(“signature”, signature);

return map;

(3.2) vip_wxsdk_dingwei方法：

@ResponseBody

@RequestMapping(“vip_wxsdk_dingwei”)

public Map<String, Object> vip_wxsdk_dingwei(Model model, Wx wx, String latitude, String longitude, HttpSession session)

if (latitude != null && longitude != null)

session.setAttribute(“latitude”, latitude);

session.setAttribute(“longitude”, longitude);

this.prompt = “success”;

else

this.prompt = “error”;

return map;

4.在我们要跳转的页面加上调启的js：

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>

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