微信公众号获取用户地理位置,转换百度坐标

开发微信公众号,首先要先成为开发者。请自行百度。

在微信公众平台开启接口权限——接口权限—网页服务—地理位置—开启在这里插入图片描述
JSSDK使用步骤

步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

这个签名由后台生成

下面是我用vue+vue-resource+微信api获取的用户经度纬度,调用百度地图api转换成地理位置。不转换偏差会很大

	// 获取当前地址(不包括#号后面的东西),微信公众号签名需要,否则会报签名无效,这个地址是传给后台生成签名用的。
				var isurl=location.href.split('#')[0]
				// 带当前地址请求后台数据
				this.$http.get('后台地址',{
					params:{
						url:isurl		// 当前地址
					},
				},).then((result) => {
				
					// 后台返回的签名数据
					var autograph = result.data;
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
						appId: autograph.appId, // 必填,公众号的唯一标识
						timestamp:autograph.timestamp, // 必填,生成签名的时间戳
						nonceStr: autograph.nonceStr, // 必填,生成签名的随机串
						signature: autograph.signature, // 必填,签名
						jsApiList: [	// 必填,需要使用微信的JS接口列表
							'getLocation',
						]
					});
					
					// 保存this,由于下面的代码不是用es6的箭头函数,所以要保存this一下
					var m=this;
					// 由于页面一加载就需要获取用户定位,所以要写wx.ready函数,没这需要可不写
					wx.ready(function(){
						// 获取用户当前位置经度纬度
						wx.getLocation({
							type: 'wgs84',		// 坐标类型 默认wgs84
							success:function(result){
							
								// 11111111111111 返回的数据看下面的截图
								// 微信返回的用户当前位置经度纬度
								var res=result;
								// 带着经度纬度用jsonp方式请求百度接口,转换成百度坐标,不转换百度坐标,偏差会很大。
								m.$http.jsonp('http://api.map.baidu.com/geoconv/v1/',{
									params:{
										coords:res.longitude+','+res.latitude,		// 微信返回用户当前位置经度纬度
										from:1,		// 当前坐标类型,1-7种类型,详情看http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
										to:5,		// 百度地图返回的坐标类型,5:bd09ll(百度经纬度坐标)6:bd09mc(百度米制经纬度坐标)
										ak:'3123skdhfiweuyrkhtkjhskf1',	// 百度地图开发者秘钥(我的乱写的),一定要设置一下 Referer白名单
									},
								},).then((result1) => {
								
									// 22222222222 返回的数据看下面的截图
									// 转换成百度坐标返回的经度纬度
									let res=result1;
									// 传经度纬度,百度地图创建点
									let pointAdd = new BMap.Point(res.body.result[0].x,res.body.result[0].y);
									// 地址解析器实例
									let gc = new BMap.Geocoder();
									// 调用百度api 将坐标转换为地理位置
									gc.getLocation(pointAdd, function(rs) {
									
										// 33333333333  返回的数据看下面的截图
										// 转换为地理位置返回的数据
										console.log(rs)
									});
									
								},(err)=>{
									alert('err请求失败')
								})
							},
							cancel: function(res) {
								alert('用户拒绝授权获取地理位置');
							}
						});
						wx.error(function(res) {
							// 上面wx.config里的debug设置true 这里调用微信jsapi返回的状态
							// alert("调用微信jsapi返回的状态:" + res.errMsg);
						});
					})
				}),(err) => {
					alert('err请求失败')
				}

1111111
在这里插入图片描述

222222
微信公众号获取用户地理位置,转换百度坐标_第1张图片
3333333
微信公众号获取用户地理位置,转换百度坐标_第2张图片

你可能感兴趣的:(微信公众号,js,vue)