如何将地理位置集成到您的 PWA 中

假设用户使用受支持的浏览器，您可以让 PWA 使用 Geolocation API 轻松检测用户的位置，或者更具体地说，使用其中的navigator.geolocation对象。 以下是在 PWA 中正确执行此操作的方法：

先决条件

• 扎实的 JavaScript 和 HTML 知识。
• 通过HTTPS提供的工作PWA （按照我们的 PWA 教程创建一个）。

地理位置在行动

到目前为止，您可能对地理定位并不陌生。 在您的许可下，集成了地理位置的网站可以访问您的位置，使用它可以显示您所在地区的相关信息，或者只是在地图上显示您的位置。

如何将地理位置集成到您的 PWA 中

基础知识

首先，我们需要了解navigator.geolocation对象背后的底层机制。 navigator对象是一个容器对象，通过它我们可以使用很多 Web API。 navigator容器内部是geolocation对象，由这三种方法提供：

• getCurrentPosition()
• watchPosition()
• clearWatch()

使用getCurrentPosition()获取用户的位置

第一个方法getCurrentPosition()的目的应该是不言自明的——它获取用户设备的位置。

 navigator.geolocation.getCurrentPosition(() => {})

获取的位置在coords和timestamp中可用，其中coords是一个Coordinates对象。 默认情况下， Coordinates对象由以下属性定义：

• accuracy以米为单位的位置精度
• altitude位置的高度
• accuracy位置高度的精度，以米为单位
• 指向设备heading的方向，以度数表示。 （0 = 北，东 = 90，南 = 180，西 = 270）
• latitude位置的纬度
• longitude位置的经度
• speed设备运行的速度，以米/秒表示

正如您可能已经猜到的那样，缺少适当跟踪硬件的设备将无法获得此 API 的全部好处，因此只会返回一些值而将其他值保留为null 。 例如，在台式计算机上，我们只能接收longitude 、 latitude和accuracy的值，而其他请求的值（ heading 、 speed ）返回null 。

watchPosition() — 定期检索用户的位置

虽然上述方法主要用于检索用户的位置，但对于依赖用户精确位置的应用程序而言，它并没有那么有用，因为众所周知，您的用户经常在移动中。 这时候我们需要navigator.geolocation的watchPosition()方法，它会注册一个回调函数来定期更新用户的位置。

 navigator.geolocation.watchPosition(位置 => {
    控制台日志（位置）
})

watchPosition方法返回一个唯一的事务id ，可用于停止接收位置更新。 使用唯一id和navigator.geolocation.clearWatch()方法，我们可以停止监视位置：

 常量 id = navigator.geolocation.watchPosition（位置 => {
    控制台日志（位置）
})

//10秒后停止观看
设置超时（（）=> {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

错误处理

当您没有设置适当的功能来处理所有错误时，它很快就会失控。 要在人类可读的块中显示错误，您需要将以下代码添加到用于显示位置的函数中：

 功能位置错误（错误）{
    开关（错误代码）{
        案例错误。PERMISSION_DENIED：
            return "用户拒绝地理定位请求。";
        案例错误。POSITION_UNAVAILABLE：
            return "位置信息目前不可用。";
        案例错误。超时：
            return "请求用户位置超时。";
        案例错误。未知错误：
            return "发生未知错误。";
    }
}

此外，您可以在控制台中对此进行测试：

 navigator.geolocation.getCurrentPosition(位置 => {
  控制台日志（位置）
}, 错误 => {
	控制台.错误（错误）
})

这将返回一个code属性，其中1表示用户权限已被拒绝， 2表示用户位置当前不可用， 3表示请求超时。

超越基础

了解基础是一回事，但您始终可以努力做得更好。 以下是您可以如何进一步改进您的地理定位功能。

查找坐标时超时

如果您的用户网络状况不佳，可以使用超时指示操作已过期。 要添加超时，我们需要添加第三个参数，其中包含以下属性：

• timeout操作过期前的毫秒数。
• maxiumAge浏览器缓存的位置的最大年龄，以毫秒为单位。
• enableHighAccuracy一个不言自明的真/假选项，它可能会消耗更多时间和资源以获取更准确的位置。

 navigator.geolocation.getCurrentPosition(位置 => {
  控制台日志（位置）
}, 错误 => {
	控制台.错误（错误）
}, {
  超时：2000，
  最大年龄：20000，
  启用高精度：真
})

在谷歌地图上显示用户位置

使用 Google Maps API，我们可以在 Google Map 上显示用户的位置。

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

要在 Web 上演示 Google Map API，我们推荐 Google 的本指南：在地图上显示用户或设备位置。 在指南中，您将找到一个集成了 Google Maps API 的基本 HTML。

或者，对基于 React 的 PWA 使用react-geolocated

如果你不适应它， react-geolocated也是一种快速轻松地将地理定位与基于 React 的应用程序集成的好方法。 只需使用以下命令将模块安装在现有 PWA之上：

 npm install react-geolocated --save

之后，按照官方 GitHub 链接中提供的步骤操作，您应该拥有一个具有内置地理定位功能的 PWA。

结论

这就是 PWA 的地理定位集成过程。 如果您在本教程的任何部分都觉得很难，请不要犹豫，在下面向我们提问！

对于寻求可靠解决方案的 Magento 商家，我们为您的企业提供完整且具有成本效益的 Magento PWA 解决方案。