在 Web 开发中，地图组件已经成为了一个非常重要的组件，它可以被用于许多不同的场景，比如实现位置定位、旅游攻略、打车软件等等。在本文中，我们将会介绍一个非常好用的 npm 包 react-googlemaps-dynamic，它可以帮助我们快速地集成谷歌地图至我们的 React 应用中。
简介
react-googlemaps-dynamic 是一个基于 React 和 Google Maps API 的动态地图组件，它可以帮助我们快速地在 React 应用中集成高质量的动态谷歌地图。react-googlemaps-dynamic 提供了非常详细的使用文档和 API 文档，让我们可以轻松地为网站添加地图服务，而无需了解复杂的地图 API。
安装
首先，我们需要在项目中安装 react-googlemaps-dynamic，可以使用 npm 或者 yarn 进行安装，例如：
# npm npm install react-googlemaps-dynamic # yarn yarn add react-googlemaps-dynamic
安装完成后，我们就可以在项目中引入 react-googlemaps-dynamic。
使用
在使用前，我们需要一个有效的 Google Maps API Key，如果你没有，请到 https://console.cloud.google.com 获取一个。获取 API Key 后，我们可以通过以下两种方式，在项目中引入 react-googlemaps-dynamic。
第一种：引入 GoogleMaps 组件
在需要使用地图的组件中，加入以下代码：
import { GoogleMaps } from 'react-googlemaps-dynamic';
// ...
<GoogleMaps apiKey={YOUR_API_KEY} />这个组件中，apiKey 属性用来设置我们的 API Key。
第二种：引入 withGoogleMaps HOC
我们也可以使用高阶组件来引入地图，例如：
-- -------------------- ---- ------- ------ - -------------- - ---- --------------------------- -- --- ----- ------------ - -------------------------- -- --- ------------- --------------------- --
其中，withGoogleMaps 用来包装我们的组件，并将 Google Maps API 注入到组件中。
API
使用 react-googlemaps-dynamic 需要了解它提供的 API，这里我们介绍其中一些常用的 API。
GoogleMaps
GoogleMaps 组件提供了以下可供设置的 props，用来控制地图的属性和行为：
- apiKey：Google Maps API Key，string 类型，必填项。
- center：地图中心的坐标，object 类型，可选项，默认值为 { lat: 37.7749, lng: -122.4194 }。
- zoom：地图缩放等级，number 类型，可选项，默认值为 5。
- onMounted：地图在页面加载后的钩子函数，function 类型，可选项。
其中，apiKey 是必填项，center 和 zoom 可以是任意有效的坐标值和缩放等级。
withGoogleMaps
除了 GoogleMaps 组件外，react-googlemaps-dynamic 还提供了 withGoogleMaps 高阶组件，用来在组件中注入 Google Maps API。
const ComponentWithGoogleMaps = withGoogleMaps(Component);
示例代码
下面的示例代码演示了如何使用 react-googlemaps-dynamic，它会在地图中心打印出当前坐标。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- ---------------------------
----- ----- - -- -- -
----- -------- ---------- - ---------- ---- -------- ---- --------- ---
----- ------------------ - -- ------ -- -- ------------------
----- ---------------- - -- --- -- --
--------------------------------------
------ -
-----------
---------------------
---------------
---------
------------------------------------
----------------------------
--
--
--
------ ------- ------结语
在本文中，我们介绍了 npm 包 react-googlemaps-dynamic 的使用教程，包括安装、引入、API 等方面。使用 react-googlemaps-dynamic 可以极大地减少我们对于复杂的 JavaScript 地图 API 的学习成本，使我们可以更快地实现高质量的动态谷歌地图服务。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822bd1