本文主要是介绍用户定位JSSDK获取用户经度纬度配合腾讯地图组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
function mapBtn() { //封装的地图 函数调用var localUrl = window.location.href;var appid,timestamp,nonceStr,signature;$.ajax({url:apiUrl+"jssdk",type:'post',dataType:'json',crossDomain: true,async: false,data:{url: localUrl},success:function(response){if (response.code == 200){//var info = response.data.jsApiParameters);appid = response.data.appId;timestamp = response.data.timestamp;nonceStr = response.data.nonceStr;signature = response.data.signature;}}});//设置朋友圈和朋友两种分享方式
wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appid, // 必填，公众号唯一标识timestamp: timestamp, //必填，生成签名的时间戳nonceStr: nonceStr, //必填，生成签名的随机串signature: signature, //必填，签名，见附录1jsApiList: ['checkJsApi', //判断当前客户是否支持指定JS接口'getLocation', //微信定位'openLocation','chooseImage'] //必填，需要使用的JS接口列表，所有JS接口列表见附录2
});//接口处理失败验证
wx.error(function(res){$.alert(res.errMsg)
});
//接口处理成功
wx.ready(function() {wx.checkJsApi({jsApiList: ['getLocation'],success: function (res) {if (res.checkResult.getLocation == false) {alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');return;}}});wx.getLocation({type: 'gcj02', // 默认为wgs84的gps坐标success: function (res) {var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度// var geocoder = new qq.maps.Geocoder({// complete: function (result) {? ?//解析成功的回调函数// var address = result.detail.address.substring(5);? //获取详细地址信息?// // console.log(address)// }// });$(".map_show").css("display","none"); //隐藏主页面 插入地图var srcs = 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&coord='+latitude+','+longitude+'&key=腾讯地图key6&referer=myapp';var str = "";str += `<iframe id="mapPage" width="100%" height="600px" frameborder=0src= ${srcs}></iframe>`;$("body").append(str); //把地图插入页面中},cancel: function (res) {alert('用户拒绝授权获取地理位置');}});
});
}
引入文件
<script src="js/base.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=腾讯地图key"></script>
window.addEventListener(‘message’, function(event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == ‘locationPicker’) {//防止其他应用也会向该页面post信息，需判断module是否为’locationPicker’
// console.log(‘location’, loc);
$(".map_show").css(“display”,“block”); //用户确认地址销毁地图
$(“iframe”).remove(); //用户确认地址销毁地图
//全局接收用户位置
console.log(loc)
}
}, false);
这篇关于用户定位JSSDK获取用户经度纬度配合腾讯地图组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
