H5 定位方案

navigator.geolocation

https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation https://developer.mozilla.org/zh-CN/docs/Web/API/GeolocationPosition

注意需要 https 协议

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      alert('经度：' + position.coords.latitude)
      alert('纬度：' + position.coords.longitude)
    },
    function (error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          alert('用户拒绝对获取地理位置的请求。')
          break
        case error.POSITION_UNAVAILABLE:
          alert('位置信息是不可用的。')
          break
        case error.TIMEOUT:
          alert('请求用户地理位置超时。')
          break
        case error.UNKNOWN_ERROR:
          alert('未知错误。')
          break
      }
    },
    { enableHighAcuracy: false }
  )
} else {
  alert('Geolocation is not supported by this browser.')
}

微信

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36

Vue.wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: options.appId, // 必填，公众号的唯一标识
  timestamp: options.timestamp, // 必填，生成签名的时间戳
  nonceStr: options.nonceStr, // 必填，生成签名的随机串
  signature: options.signature, // 必填，签名
  jsApiList: ['getLocation', 'updateAppMessageShareData'], // 必填，需要使用的JS接口列表
})
Vue.wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})
Vue.wx.error(function (err) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
})

百度

官网：https://lbsyun.baidu.com/index.php?title=jspopularGL

定位方案：https://lbs.baidu.com/index.php?title=jspopularGL/guide/geoloaction

错误码：https://lbsyun.baidu.com/index.php?title=android-locsdk/guide/addition-func/error-code

<script
  type="text/javascript"
  src="https://api.map.baidu.com/api?v=2.0&ak=秘钥"
></script>

var baiduScript = document.createElement('script')
baiduScript.src =
  'https://api.map.baidu.com/api?v=2.0&ak=IA5wA0g4QxYwW6KEDRzoUYKqWAT3vlY8'
document.body.appendChild(baiduScript)
var geolocation = new window.BMap.Geolocation()
geolocation.getCurrentPosition((r) => {
  console.log(r)
  alert(JSON.stringify(r.point))
})

高德

官网：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

定位方案：https://lbs.amap.com/api/javascript-api/guide/services/geolocation

错误码：https://lbs.amap.com/faq/js-api/map-js-api/position-related/43361

var baiduScript = document.createElement('script')
baiduScript.src =
  'https://webapi.amap.com/maps?v=1.4.15&key=b694eb0b945d8734f97362495802d4b6&plugin=AMap.Driving'
document.body.appendChild(baiduScript)
AMap.plugin('AMap.Geolocation', function () {
  var geolocation = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
    // 设置定位超时时间，默认：无穷大
    timeout: 3000,
    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    buttonOffset: new AMap.Pixel(10, 20),
    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    zoomToAccuracy: true,
    //  定位按钮的排放位置,  RB表示右下
    buttonPosition: 'RB',
  })

  geolocation.getCurrentPosition()
  AMap.event.addListener(geolocation, 'complete', onComplete)
  AMap.event.addListener(geolocation, 'error', onError)

  function onComplete(data) {
    // data是具体的定位信息
    alert(JSON.stringify(data))
  }

  function onError(data) {
    // 定位出错
    alert(JSON.stringify(data))
  }
})