html5手機端定位

標籤：ane   ntp   word   全面   pos   i++   code   安卓   .so   

由於項目需要，不得不研究一下手機端的定位。

起初想到的是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: [‘擷取位置失敗‘]})  }})

高德擷取詳細資料

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()  })})

以上代碼僅供參考，詳情聯絡本人，郵箱：[email protected]

html5手機端定位