您好,欢迎访问三七文档
当前位置:首页 > 行业资料 > 冶金工业 > 微信JSSDK获取当前地理位置信息
最近在研究微信JS-SDK文档中的地理位置接口部分,小有心得,在此和大家分享一下。首先是JSSDK的接入,可参照官方文档来做,在此略过。下面进入本文的正题:如果获取当前地理位置的信息,包括经纬度和位置详细信息,并在微信公众号页面中打开当前位置的地图,步骤如下:1.在页面上放置一个按钮,用来点击触发获取地理位置接口的事件:spanclass=desc获取地理位置接口/spanbuttonclass=weui_btnweui_btn_primaryid=getLocationgetLocation/button2.在js里,在wx.ready(function(){})函数里写一个上面按钮的点击事件,用来获取当前位置的地理位置:document.querySelector('#getLocation').onclick=function(){wx.getLocation({type:'gcj02',//默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'success:function(res){varlatitude=res.latitude;//纬度,浮点数,范围为90~-90varlongitude=res.longitude;//经度,浮点数,范围为180~-180。varspeed=res.speed;//速度,以米/每秒计varaccuracy=res.accuracy;//位置精度$.ajax({url:=+latitude+,+longitude+&coord_type=5&key=你自己的腾讯开放平台的开发者秘钥&output=jsonp&callback=calllocation,type:GET,dataType:'jsonp',jsonp:'calllocation'});},cancel:function(res){alert('用户拒绝授权获取地理位置');}});};上面代码中,有几点需要主意:wx.getLocation接口中需要传入的参数type必须是gcj02;$.ajax()方法的url是腾讯地图开放平台中WebServiceAPI的逆地理解析的接口url,地址是:,参数location取经纬度,纬度在前,经度在后,coord_type是坐标系类型,在此取5,表示腾讯地图的坐标系,因为是远程跨域请求,所以output取jsonp,callback的值是自定义函数的名称,key是腾讯开放平台的开发者秘钥,需要在腾讯开放平台去申请,调用远程接口的ajax请求必须是GET请求。这个请求的返回值会在回调函数calllocation里获取:functioncalllocation(data){varname=data.result.formatted_addresses.rough;varaddress=data.result.formatted_addresses.recommend;varlat=data.result.location.lat;varlng=data.result.location.lng;wx.openLocation({latitude:lat,//纬度,浮点数,范围为90~-90longitude:lng,//经度,浮点数,范围为180~-180。name:name,//位置名address:address,//地址详情说明scale:18,//地图缩放级别,整形值,范围从1~28。默认为最大infoUrl:''//在查看位置界面底部显示的超链接,可点击跳转});}在回调函数里根据返回值获取到经纬度坐标,位置名称,位置详细地址后,再调用wx.openLocation()接口在页面上打开此位置的地图,从地图中可看到此位置,以红色标记标出,还有名称和地址在地图下方显示出来。最后,打开地图这个效果要在手机微信公众号中才能看到,PC微信中是看不到的。
本文标题:微信JSSDK获取当前地理位置信息
链接地址:https://www.777doc.com/doc-2435217 .html