微信JSSDK获取当前地理位置信息
2016-08-07 10:50
489 查看
最近在研究微信JS-SDK文档中的地理位置接口部分,小有心得,在此和大家分享一下。首先是JSSDK的接入,可参照官方文档来做,在此略过。
下面进入本文的正题:
如果获取当前地理位置的信息,
包括经纬度和位置详细信息,并在微信公众号页面中打开当前位置的图
步骤如下:
1.
在页面上放置一个按钮,用来点击触发获取地理位置接口的事件:
获取地理位置接口
getLocation
2.在js里,在wx.ready(function(){})函数里写一个上面按钮的点击事件,用来获取置的地理位置:
document.querySelector(‘#getLocation’).onclick = function() {
wx.getLocation({
type: ‘gcj02’, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入’gcj02’
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
},
cancel: function (res) {
alert(‘用户拒绝授权获取地理位置’); }
});
};
上面代码中,有几点需要主意:
wx.getLocation接口中需要传入的参数type必须是gcj02; $.ajax() 方法是
腾讯地图开放平台中WebServiceAPI的逆地理解析的接口url,地址是:
http://apis.map.qq.com/ws/geocoder/v1/,参数location取经纬度,纬度在前,经度在后,coord_type是坐标系类型,在此取5,表示腾讯地图的坐标系,因为是远程跨域请求,所以output取jsonp,callback的值是自定义函数的名称,key是腾讯开放平台的开发者秘钥,需要在腾讯开放平台去申请,调用远程接口的ajax请求必须是GET
请求。这个请求的返回值会在回调函数calllocation里获取:
function calllocation(data){
var name=data.result.formatted_addresses.rough;
var address=data.result.formatted_addresses.recommend;
var lat=data.result.location.lat;
var lng=data.result.location.lng;
wx.openLocation({
latitude: lat, // 纬度,浮点数,范围为90 ~ -90
longitude: lng, // 经度,浮点数,范围为180 ~ -180。
name: name, // 位置名
address: addr
4000
ess, // 地址详情说明 scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: ”// 在查看位置界面底部显示的超链接,可点击跳转
});
}
在回调函数里根据返回值获取到经纬度坐标,位置名称,位置详细地址后,再调用
wx.openLocation()
接口在页面上打开此位置的地图,从地图中可看到此位置,以红色标记标出,还有名称和地址在地图下方显示出来。
最后,打开地图这个效果要在手机微信公众号中才能看到,PC微信中是看不到的。
下面进入本文的正题:
如果获取当前地理位置的信息,
包括经纬度和位置详细信息,并在微信公众号页面中打开当前位置的图
步骤如下:
1.
在页面上放置一个按钮,用来点击触发获取地理位置接口的事件:
获取地理位置接口
getLocation
2.在js里,在wx.ready(function(){})函数里写一个上面按钮的点击事件,用来获取置的地理位置:
document.querySelector(‘#getLocation’).onclick = function() {
wx.getLocation({
type: ‘gcj02’, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入’gcj02’
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
$.ajax({ url: "http://apis.map.qq.com/ws/geocoder/v1/?location="+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() 方法是
腾讯地图开放平台中WebServiceAPI的逆地理解析的接口url,地址是:
http://apis.map.qq.com/ws/geocoder/v1/,参数location取经纬度,纬度在前,经度在后,coord_type是坐标系类型,在此取5,表示腾讯地图的坐标系,因为是远程跨域请求,所以output取jsonp,callback的值是自定义函数的名称,key是腾讯开放平台的开发者秘钥,需要在腾讯开放平台去申请,调用远程接口的ajax请求必须是GET
请求。这个请求的返回值会在回调函数calllocation里获取:
function calllocation(data){
var name=data.result.formatted_addresses.rough;
var address=data.result.formatted_addresses.recommend;
var lat=data.result.location.lat;
var lng=data.result.location.lng;
wx.openLocation({
latitude: lat, // 纬度,浮点数,范围为90 ~ -90
longitude: lng, // 经度,浮点数,范围为180 ~ -180。
name: name, // 位置名
address: addr
4000
ess, // 地址详情说明 scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: ”// 在查看位置界面底部显示的超链接,可点击跳转
});
}
在回调函数里根据返回值获取到经纬度坐标,位置名称,位置详细地址后,再调用
wx.openLocation()
接口在页面上打开此位置的地图,从地图中可看到此位置,以红色标记标出,还有名称和地址在地图下方显示出来。
最后,打开地图这个效果要在手机微信公众号中才能看到,PC微信中是看不到的。
相关文章推荐
- 微信小程序系列-1获取系统信息,地理位置,用户信息
- 微信获取用户地理位置信息-微信jsapi接口
- 微信获取用户地理位置信息的原理与步骤
- C#微信结合百度api获取当前用户的地理位置
- 微信jssdk获取当前位置,以及打开微信地图
- 如何获取微信好友的地理位置信息
- 微信JSAPI - 获取用户地理位置信息
- 微信jssdk获取当前位置,以及打开微信地图
- 微信获取用户地理位置信息的原理与步骤
- 微信小程序 获取当前地理位置和经纬度实例代码
- 微信获取地理位置信息
- 微信获取用户地理位置信息-微信jsapi接口
- 续【C#微信结合百度api获取当前用户的地理位置】代码详解
- 微信小程序实例-获取当前的地理位置、速度
- 微信获取用户地理位置信息的原理与步骤
- C#实现微信结合百度api获取当前用户地理位置的方法
- iOS菜鸟学习——获得当前位置及地理信息
- Android 通过经纬度获取地理位置信息
- 通过IP地址获取当前地理位置(省份)的接口
- Android 使用GPS获取当前地理位置