1.绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
2.引入js文件
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>//地图文件
3.获取微信需要字段
var appId, //公众号名称,由商户传入
timeStamp, //时间戳,自1970年以来的秒数
nonceStr, //随机串
signature; //微信签名方式
$.ajax({ type : 'post', url : '../', dataType:'json', success : function(data){ //alert(JSON.stringify(data)); appId= data.appId; // 必填,公众号的唯一标识 timeStamp= data.timeStamp; // 必填,生成签名的时间戳 nonceStr= data.nonceStr; // 必填,生成签名的随机串 signature= data.signature; getLocation();//获取地理位置 }, beforeSend:function(){ }, error:function(){ alert('error'); } });
4.调微信获取地理位置接口(返回经、纬度值)
function getLocation(){ /* 微信分享朋友圈 */ wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: appId, // 必填,公众号的唯一标识 timestamp: timeStamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature,// 必填,签名,见附录1 jsApiList: ["getLocation"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function(){ //获取地理位置 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; // 位置精度 //alert('纬度'+latitude+" ;经度"+longitude); //生成地理位置 var fname = ''; var point = new BMap.Point(longitude, latitude); var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs) { var addComp = rs.addressComponents; //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber); fname = addComp.district; //alert('您现在所处位置:'+fname); //抽奖--判断地理位置 & 抽奖机会 if(fname=='XX区'){ //执行 }else{ alert('本次活动目前向针对活动地区开放,其他地区敬请期待!');return; } }); }, fail:function(res){ alert("获取位置失败,检查是否开启定位服务"); } }); }); wx.error(function(res){ console.log(res.errMsg); }); wx.checkJsApi({ jsApiList: ["getLocation"], // 需要检测的JS接口列表,所有JS接口列表见附录2, success: function(res) { //alert('check success!') // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); }
5.根据径、纬度获取地理位置方法
/* * 根据经纬度获取位置 * param1:经度 * param2:纬度 */ //获取地理位置 //var map = new BMap.Map("allmap"); var point = new BMap.Point(lng, lat); //map.centerAndZoom(point, 12); var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs) { var addComp = rs.addressComponents; //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber); return addComp.district; });
6.常见问题
我在使用时把经纬度转换地理位置写成一个getAddress()方法,在wx.getLocation的成功回调是调用getAddress,发现我几处弹框弹出的顺序不对,没有成功拿到getAddress的返回值。
所以使用时需要注意百度地图的这个API是异步执行。