html5手機端定位

因爲項目須要，不得不研究一下手機端的定位。

起初想到的是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()
  })
})

以上代碼僅供參考，詳情聯繫本人，郵箱：sfengme@gmail.com