用户定位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,   //必填，签名，见附录1
    jsApiList: [
        '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 ~ -90
            var 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=0
                    src= ${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);