html5手機端定位

因爲項目須要,不得不研究一下手機端的定位。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

相關文章
相關標籤/搜索