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

以上代码仅供参考，详情联系本人，邮箱：[email protected]