關鍵代碼:
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('用戶拒絕授權獲取地理位置'); } }); }); })