因爲項目須要,不得不研究一下手機端的定位。git
起初想到的是HTML5定位,本地測試下來,安卓沒什麼問題,IOS報錯,提示不支持http協議。因爲後端除了經緯度,還須要城市名之類的詳細數據,便調研了一下高德地圖。高德地圖確實好用,拿到的數據很全面。很快調試完上了測試服務器,結果意外發現一個問題——就是在4G的狀況下,微信和QQ直接就是沒法獲取位置!坑啊,無奈只能轉換思路,利用微信JSSDK定位和QQ的接口分別獲取到經緯度以後,經過高德地圖查詢位置的詳細信息,固然在瀏覽器下仍是直接利用高德地圖來定位。項目結束後,我就苦笑說,還要兼容哪些app,我來搞定!後端
下面附上部分代碼:瀏覽器
微信JSSDK,接口需微信簽名,這邊就略過了。緩存
self.$loader.open() window.wx.getLocation({ type: 'wgs84', // 默認爲wgs84的gps座標,若是要返回直接給openLocation用的火星座標,可傳入'gcj02' success: function (res) { let lat = res.latitude let lng = res.longitude }, error: function (res) { // 關閉loader self.$loader.close() self.$alert({text: ['獲取位置失敗']}) } })
QQ接口服務器
self.$loader.open() window.mqq.sensor.getLocation({allowCacheTime: 60}, function (retCode, latitude, longitude) { if (retCode === 0) { let lat = latitude let lng = longitude } else { self.$loader.close() self.$alert({text: ['獲取位置失敗']}) } })
高德地圖定位微信
var map = new window.AMap.Map('iCenter') map.plugin('AMap.Geolocation', function () { let geolocation = new window.AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默認:true timeout: 10000, // 超過10秒後中止定位,默認:無窮大 maximumAge: 600000, // 定位結果緩存0毫秒,默認:0 convert: true, // 自動偏移座標,偏移後的座標爲高德座標,默認:true showButton: false, // 顯示定位按鈕,默認:true buttonPosition: 'LB', // 定位按鈕停靠位置,默認:'LB',左下角 buttonOffset: new window.AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量,默認:Pixel(10, 20) showMarker: false, // 定位成功後在定位到的位置顯示點標記,默認:true showCircle: false, // 定位成功後用圓圈表示定位精度範圍,默認:true panToLocation: false, // 定位成功後將定位到的位置做爲地圖中心點,默認:true zoomToAccuracy: false // 定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見,默認:false }) map.addControl(geolocation) geolocation.getCurrentPosition() window.AMap.event.addListener(geolocation, 'complete', onComplete) // 返回定位信息 window.AMap.event.addListener(geolocation, 'error', onError) // 返回定位出錯信息 function onComplete (result) { let city = result.addressComponent.city || result.addressComponent.province let lat = result.position.lat let lng = result.position.lng } function onError () { // 關閉loader self.$loader.close() self.$alert({text: ['獲取位置失敗']}) } })
高德獲取詳細信息app
let lnglatXY = [lng, lat] // 已知點座標 var geocoder = new window.AMap.Geocoder({ radius: 1000 }) geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { let city = result.regeocode.addressComponent.city || result.regeocode.addressComponent.province } })
高德查詢附近關鍵詞測試
window.AMap.service(['AMap.PlaceSearch'], function () { var placeSearch = new window.AMap.PlaceSearch({ // 構造地點查詢類 pageSize: 10, pageIndex: 1, city: 'citycode', // 城市代碼 map: map, panel: 'panel' }) // 關鍵字查詢 經緯度附近多少米 placeSearch.searchNearBy('keyword', [lng, lat], 5000, function (status, result) { if (status === 'complete' && result.info === 'OK') { let arr = [] let list = result.poiList.pois for (let i = 0; i < list.length; i++) { arr.push({ title: list[i].name, value: list[i].address, lat: list[i].location.lat, lng: list[i].location.lng, distance: list[i].distance }) } // 排序 arr.sort(function (a, b) { return a.distance > b.distance }) } // 關閉loader self.refresh = true self.$loader.close() }) })
以上代碼僅供參考,詳情聯繫本人,郵箱:sfengme@gmail.comspa