微信开发-JS接口微信定位

最新推荐文章于 2024-04-12 19:24:34 发布

cl11992

最新推荐文章于 2024-04-12 19:24:34 发布

阅读量2.9k

点赞数 1

分类专栏：微信微信开发文章标签：微信公众号微信定位

本文链接：https://blog.youkuaiyun.com/cl11992/article/details/86589533

版权

微信同时被 2 个专栏收录

24 篇文章

订阅专栏

微信开发

24 篇文章

订阅专栏

一、介绍

微信不支持服务端定位，只有JS接口进行实现定位，在这里面记录一下

二、注意

微信定位使用access_token是普通access_token
下图的标红的位置记住必须要写这两个

二、微信定位代码实例

服务端代码

下方需要的类cardSignature：https://blog.youkuaiyun.com/cl11992/article/details/86589656

/**
 * 定位
 */
@ProductException
@RequestMapping(value = "location")
public ModelAndView location(HttpServletRequest request, HttpServletResponse response) throws Exception {
	ModelAndView mv = new ModelAndView("wx/location");// 微信定位页面
	// 定位
	String appid = "XXXXXXXXX";//公众号appid

	mv.addObject("config", cardSignature.getSignature(request, appid));
	return mv;
}

location.html

进入页面自动调用微信定位，查看控制台可以看到微信经度和微信纬度

<body>
	<script type="text/javascript" src="${ctx}/js/common/jquery-1.11.3.min.js"></script> 
	<script type="text/javascript" src="${ctx}/js/JS-SDK.js"></script>
	<script>
		wxobj.getLocation(function(longitude, latitude) {
		    console.log("微信经度："+longitude);
		    console.log("微信纬度："+latitude);
	    });
	</script>
</body>

JS-SDK.js

##  微信接口
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	var wxobj = {
		//位置服务
		getLocation : function(callback){
			//判断当前客户端版本是否支持指定JS接口
			wx.ready(function(){
			    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				wx.checkJsApi({
					jsApiList: ['getLocation'],
					success: function(res) {
						// 以键值对的形式返回，可用的api值true，不可用为false
						//如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
						if (res.checkResult.scanQRCode == false) {
							alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
				            return;
						}
						if (res.checkResult.getLocation == false) {
				            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
				            return;
						}
						wx.getLocation({
							type: 'wgs84',						// 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						    success: function (res) {
								try{
							    	console.log("微信data"+res);
									var latitude = res.latitude; 	// 纬度，浮点数，范围为90 ~ -90
									var speed = res.speed; 			// 速度，以米/每秒计
									var accuracy = res.accuracy; 	// 位置精度
									var longitude = res.longitude;  // 经度，浮点数，范围为180 ~ -180。
									
									console.log("微信经度："+longitude);
									console.log("微信纬度："+latitude);
									
									callback(longitude, latitude);
						   		}catch(error){
						   			alert('解析地理位置错误');
						   		}
							},
							cancel: function (res) {
						       	alert('用户拒绝授权获取地理位置');
							},
							fail:function(res) {
							    //alert(JSON.stringify(res));
							    alert("未能获取地理位置，首先检查手机是否启用微信定位");
							}
						});
				       
				   }
				});
			});
		}
	};
	jQuery(function(){ 
		wx.config({
		  //  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		    appId: '$config.appId', // 必填，公众号的唯一标识
		    timestamp: '$config.timestamp', // 必填，生成签名的时间戳
		    nonceStr: '$config.nonceStr', // 必填，生成签名的随机串
		    signature: '$config.signature',// 必填，签名，见附录1
		    jsApiList: ['openLocation','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		//wx.ready(function(){
		    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
		//});
		//wx.error(function(res){
		    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		//});
		//判断当前客户端版本是否支持指定JS接口
		//wx.checkJsApi({
		//    jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
		 //   success: function(res) {
		        // 以键值对的形式返回，可用的api值true，不可用为false
		        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
		  //  }
		//});
		
	});
</script>