微信公众号开发城市定位使用攻略

本文主要介绍微信公众号开发利用JS-SDK和WebService API如何定位到当前城市。

1调用JS-SDK定位功能,获取当前经纬度

引入JS-SDK的JS文件

http://res.wx.qq.com/open/js/jweixin-1.2.0.js(支持https)

通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用

代码如下

1
2
3
4
5
6
7
8
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,企业号的唯一标识,此处填写企业号corpid(注册公众号自动生成的appId)
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录3(这里我只填了获取经纬度的JS接口)
});

timestamp,nonceStr,signature,jsApiList全部由后台生成

通过ready接口处理成功验证

1
2
3
wx.ready(function(){
//你的代码
});

通过error接口处理失败验证

1
2
3
wx.error(function(res){
//你的代码
});

获取经纬度

代码如下:

1
2
3
4
5
6
7
8
9
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; // 位置精度
}
});

2解析经纬度,获取城市信息

引入API服务JS

http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY(支持https)
其中,v参数是引用的版本号,目前腾讯地图提供两个版本,分别是v=1,v=2.exp,推荐使用2.exp,可以获得最新最快的支持。Key参数YOUR_KEY是Key鉴权中申请的key。(申请地址:http://lbs.qq.com/key.html)

逆地址解析

代码如下:

1
2
3
4
5
6
7
var geocoder = new qq.maps.Geocoder({
complete:function(result){
return result.detail.addressComponents.city;
}
});
var coord=new qq.maps.LatLng(经度,纬度);
geocoder.getAddress(coord);

3使用腾讯地图API,通过地名获取经纬度

地址解析

代码如下:

1
2
3
4
5
6
7
8
9
var callbacks={
complete:function(results){
console.log(results);
results.detail.location.lat, // 纬度,浮点数,范围为90 ~ -90
results.detail.location.lng, // 经度,浮点数,范围为180 ~ -180。
}
};
var geocoder = new qq.maps.Geocoder(callbacks);
geocoder.getLocation(app.address);

4调用微信内置地图,定位目标点

查看地图

代码如下:

1
2
3
4
5
6
7
8
wx.openLocation({
latitude: 0, // 纬度,浮点数,范围为90 ~ -90
longitude: 0, // 经度,浮点数,范围为180 ~ -180。
name: '', // 位置名
address: '', // 地址详情说明
scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
扫一扫,请老师喝水