前端如何获取位置信息

获取用户位置信息方式

1. HTML5 Geolocation API

使用 HTML5 的 Geolocation API 获取用户位置信息。需要满足以下条件：

• 浏览器支持，注意 Chrome 浏览器仅支持 https 页面下获取位置信息
• 用户授权，在调用 API 前，会弹出授权窗口让用户授权。如果用户未授权，后面将不会再弹窗提示，需要自己去设置里开启
• 有兼容性问题

定位失败，主要有三种情况，对应的错误码为：

• 1：用户拒绝授权
• 2：位置信息不可用
• 3：获取位置信息超时

export const getLocationByBrowser = (): Promise<GeolocationCoordinates> => {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      return reject({
        code: -1,
        message: '当前浏览器不支持定位，请升级浏览器版本',
      });
    }

    window.navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        resolve(coords);
      },
      (err) => {
        reject(err);
      },
      {
        enableHighAccuracy: true, // 高精度定位，默认false。
        timeout: 1000, // 超时时间，单位ms
      },
    );
  });
};

// 使用
const loc = await getLocationByBrowser();

2. 内嵌 IOS 和安卓的 H5 页面

在内嵌原生时，有两种获取位置信息的方式：

1. 使用 JSBridge 调用原生方法获取位置信息
2. 继续使用浏览器 Geolocation API 获取位置信息

使用 JSBridge 调用原生方法获取位置信息，有以下优缺点。

优点：

• 可以获取到更精确的位置信息
• 更好的性能
• 更好兼容性
• 没有 https 限制

缺点：

• 需要在原生端和 Web 端都实现相应的代码，增加了开发和维护的复杂性。

// 引入 JSBridge，注入方式有多种，可以是 npm 包，也可以script形式
import { getLocation } from 'xxxjsbridge';

// 使用
const loc = await getLocation();

3. 微信小程序

// 获取位置信息
wx.getLocation({
  type: 'wgs84', // 返回 gps 坐标
  success: function (res) {
    console.log(res.latitude, res.longitude);
  },
});

4. 三方服务（以高德地图为例）

获取位置信息完整代码

Q&A

1. Chrome PC 浏览器获取位置超时

即使设置了比较大的 timeout 时间，仍然会报超时错误。找不到问题原因。Firefox PC 和手机版的 Google Chrome 浏览器是正常的。