在现代的 Web 应用程序中，地理定位是非常重要的功能。可以实现很多有趣的功能，比如定制化的个性化服务、针对特定区域的广告、距离感知和导航等等。Node Package Manager (npm) 提供了很多应用程序的依赖，其中就包括了 @hypersprite/react-geolocation-hoc 这个 npm 包。本文将介绍这个 npm 包以及如何使用它构建前端应用程序。
@hypersprite/react-geolocation-hoc 是什么？
@hypersprite/react-geolocation-hoc 是一个 npm 包，提供一个高阶组件（Higher-order Component，HOC）来获取用户的地理位置信息。该组件将 geolocation API 封装为更易于使用的 React API。我们可以通过这个 npm 包获取用户经纬度、速度、移动方向等相关信息。@hypersprite/react-geolocation-hoc 提供了一组 React 组件，可以轻松实现所有的 geolocation API 功能。
如何使用 @hypersprite/react-geolocation-hoc？
首先，我们需要安装 @hypersprite/react-geolocation-hoc。
npm install --save @hypersprite/react-geolocation-hoc
或者使用 yarn:
yarn add @hypersprite/react-geolocation-hoc
接下来，我们将在 React 组件中使用 @hypersprite/react-geolocation-hoc 组件。由于是高阶组件，它可以包裹任何我们想要获取地理位置的组件。
-- -------------------- ---- -------
------ --------------- ---- -------------------------------------
----- --- ------- --------------- -
-------- -
----- - ----------- - - -----------
----- - --------- --------- - - ------------
------ -
-----
-------- --------------
-------- ---------------
------
--
-
-
------ ------- ---------------------这个应用程序将显示用户的纬度和经度。在内部，withGeolocation 已经封装了获取地理位置的 geolocation API 的所有逻辑，并将位置信息以属性（props）的形式传递给了包装的组件。使用方式如上所述，在组件中，通过 this.props.geolocation 可以获取到用户的位置信息。
完整实例
你可以通过下面的代码来完整实现这个例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------------- ---- -------------------------------------
----- --- ------- --------- -
-------- -
----- - ----------- - - -----------
----- - --------- --------- - - ------------
------ -
-----
----------------
------ --------------
------ ---------------
------
--
-
-
------ ------- ---------------------总结
本文简要介绍了 @hypersprite/react-geolocation-hoc 这个 npm 包，提供了一种轻松获取用户地理位置信息的方式，同时也是 React 组件的高级应用。借助这个 npm 包，可以非常轻松地实现地理位置相关的应用程序，同时也帮助我们在学习和使用过程中理解 React 组件和高阶组件的概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e244190