h5定位总结（h5api + 高德 + 腾讯）

最新推荐文章于 2024-09-24 09:17:56 发布

mytheart

最新推荐文章于 2024-09-24 09:17:56 发布

阅读量4.7k

点赞数 3

分类专栏： JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_42755677/article/details/107091920

版权

本文总结了H5 API定位的不足，指出其定位不准确且成功率低。然后对比了高德定位在https环境下在PC和iOS上的问题，尽管在安卓上表现尚可。最后，介绍了腾讯定位的优势，它提供了更高的成功率和跨平台兼容性，包括GPS和IP等多种定位方式，并建议封装定位方法以提高复用性。

摘要由CSDN通过智能技术生成

H5 API定位

总结：定位非常不准，并且成功率很低。

高德定位

需要在https域名下调用，本地调用偶尔能成功

/**
 * 高德精确定位
 * @param {*} config
 * https://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation
 */
export function locationGaodeExact(config = {
   }) {
   
  return new Promise((res, rej) => {
   
    AMap.plugin('AMap.Geolocation', function() {
   
      var geolocation = new AMap.Geolocation({
   
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 1000, //超过10秒后停止定位，默认：5s
        buttonPosition: 'RB', //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        ...config
      });
      geolocation.getCurrentPosition(function(status, result) {
   
        if (status == 'complete') {
   
          onComplete(result);
        } else {
   
          onError(result);
        }
      });
    });

    //解析定位结果
    function onComplete(data) {
   
      const {
   
        position: {
    lng, lat },
        formattedAddress,
        addressComponent: {
    province, city, district, adcode }
      } = data;
      const result = {
   
        longitude: lng,
        latitude: lat,
        province,
        city,
        district,
        address: formattedAddress,
        adcode // 区县code
      };
      console.log('location success', result);

      res(result);
    }
    //解析定位错误信息
    function onError(error) {
   
      console.log('location error', error);
      return rej(error);
    }

    // res({
   
    //   longitude: '120.023763,',
    //   latitude: '30.289903',
    //   city: '杭州市',
    //   district: '拱墅区',
    //   adcode: '330105'
    // })
  });
}

在PC端和IOS端经常定位失败，安卓定位还可以。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高德定位 和 H5定位</title>

  <style>
    * {
   
      margin: 0;
      padding: 0;
    }

    #container {
   
      width: 100%;
      height: 500px;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2da0409b47ac022fb666ccaa88b4c75b"></script>
  <script>
    // h5获取 (no)
    // window.navigator.geolocation.getCurrentPosition((e) => { alert('H5-success');alert(JSON.stringify(e)) }, (e) => { alert('h5-fail') })

    // var map = new AMap.Map('container', {
   
    //   resizeEnable: true
    // })
    // var map = new AMap.Map('container', {
   
    //   // resizeEnable: true,
    //   // center: [120.023763, 30.289903],
    //   zoom: 15,
    // })

    AMap.plugin('AMap.Geolocation', function () {
   
      var geolocation = new AMap.Geolocation({
   
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new