调用腾讯API访问用户当前定位以及打开微信内置地图

it2022-06-09  78

关键代码:

wx.openLocation(function(){ longitude: longitude, latitude: latitude, name: name, address: address });

 

下面是具体步骤:

第一点,先去腾讯API申请所需密匙; 然后html页面引入Js <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你的密匙"></script> 第二点切记: 在html页面的meta属性,引用如下几个,不然会影响微信内置地图的缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true"> var url = location.href.split('#')[0];     //获取当前地址,切记微信是要筛出#后面的地址 $.post("weixin/getJSSDKSign", {url:url}, function(data){ //通过config注入接口权限 wx.config({     debug: false,     appId:data.signModel.appId,     timestamp: data.signModel.timestamp,//时间戳     nonceStr: data.signModel.nonceStr,//随机串     signature: data.signModel.signature,//签名     jsApiList: [        'checkJsApi' ,        'getLocation',//微信定位        'openLocation',        'chooseImage'     ]     }) //接口处理失败验证        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: 'wgs84', // 默认为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);  //获取详细地址信息                      $('#nowAddress').text('')                     $('#nowAddress').text(address)//将解析出来的地址渲染到页面                 }             });             geocoder.getAddress(new qq.maps.LatLng(latitude, longitude));             //周边设备位置展示         $.ajax({             url:"nearby/getNearby",             data:{latitude:latitude,longitude:longitude},             type:"get",             dataType:"json",             success:function(data){             var reslut=data.result;//通过后台返回的数据列表渲染页面,这里采用的字符串拼接的方法             var html = '' if(reslut.length == 0){ $('.siteList').remove() $('.noImg').show() $('.notNews').text('暂无相关信息') }else{ $('.siteList').remove() for (var i = 0; i < reslut.length; i++) { html += '<div class="siteList">'                  + '<div class="siteBoxNull">'                  + '</div>'                  + '<ul class="siteListBox-1">'                   + '<li>'                  + '<p id="name">' + reslut[i].name + '</p>'                  + '<i></i>'                  + '</li>'                  + '<li>'                  + '<span class="first-span">' + reslut[i].address + '</span>'                  + '<span style="color:#333333;">' + reslut[i].distance + "km" +'</span>'                  + '<input type="hidden" value="'+reslut[i].longitude+'" id="longitude"/>'                  + '<input type="hidden" value="'+reslut[i].latitude+'" id="latitude"/>'                  + '</li>'                  + '</ul>'                  + '</div>' } } $('body').append(html) $('.siteList').on('click',function(){//切记IOS系统解析出来的经纬度地址是一个string类型的字符串,必选转换IOS系统才能访问 var longitude = Number($(this).find('#longitude').val()) var latitude = Number($(this).find('#latitude').val()) var name = $(this).find('#name').text() var adress = $(this).find('.first-span').text() wx.openLocation({     latitude: longitude, // 纬度,浮点数,范围为90 ~ -90     longitude: latitude, // 经度,浮点数,范围为180 ~ -180。     name: name, // 位置名     address: adress, // 地址详情说明     scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大     infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转 }); })             }         })     },     cancel: function (res) {     alert('用户拒绝授权获取地理位置');     } }); }); })

 

转载于:https://www.cnblogs.com/yuan9580/p/11069607.html


最新回复(0)