React-js-google-maps 是一个用于在 React 应用中集成 Google Maps API 的 npm 包。它使用了 Google Maps Platform 的 JavaScript API 来帮助我们轻松地生成地图、标记、路线和信息窗口等功能。
在本篇文章中，我们将会介绍如何安装和使用 react-js-google-maps，以及如何在 React 应用中集成 Google Maps API 的一些技巧和经验。
安装 react-js-google-maps
通过 npm 包管理工具，我们可以轻松地安装 react-js-google-maps：
npm install --save react-js-google-maps
我们也需要将一些必要的依赖项添加到我们的项目中：
npm install --save google-map-react npm install --save @google/maps npm install --save @types/googlemaps
在 React 应用中使用 react-js-google-maps
在我们开始使用 react-js-google-maps 之前，我们需要先注册一个 Google Maps API 密钥。我们可以点击这个链接来创建并获取一个 API 密钥：
https://developers.google.com/maps/gmp-get-started#create-project
使用 react-js-google-maps，我们可以轻松地生成一个 Google 地图并设置一些参数：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ - ------------- - ---- ---------------
----- ----------------- - -- ---- -- -- ------------------
----- --------- ------- --------------- -
------ ------------ - -
------- -
---- ------
---- -----
--
----- --
--
-- ----- ------ ---- --- ----
-----------------
------------------ -
-------------
-- -- --- ---
--------------------- - --- --------------- ---- -------------- ---
-
-------- -
------ -
-- ---------- ------ --
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
-
------------------
---------------
---------------
-------- -------
--
-----------------
--
-
-
------ ------- ----------在上面的代码中，我们定义了 SimpleMap 组件，其中包含了一个 Google 地图和一个标记。我们通过设置 defaultCenter 和 defaultZoom 属性来定位地图中心和缩放等级，然后通过传入 lat 和 lng 属性来定位标记的位置。
我们还需要将我们在 Google Cloud Console 中获取到的 API 密钥设置到客户端中，以启动 Google Maps API。
添加谷歌地图样式
Google Maps 样式可以让我们的地图看起来更加美观和专业。我们可以通过添加特定样式并将其传入 GoogleMapReact 组件来自定义地图样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ - ------------- - ---- ---------------
----- ----------------- - -- ---- -- -- ------------------
----- --------- ------- --------------- -
------ ------------ - -
------- -
---- ------
---- -----
--
----- --
--
-- ----- ------ ---- --- ----
-----------------
------------------ -
-------------
-- -- --- ---
--------------------- - --- --------------- ---- -------------- -- -
-------- -------
---
-
-------- -
----- -------- - -
-
-------------- -----------------------------
---------- -
- ------------- ----- -
-
--
-
-------------- ------------------------------
---------- -
- ------------- ----- -
-
--
-
-------------- ------
-------------- -------------------
---------- -
- -------- --------- --
- ------------ ---- -
-
--
-
-------------- -----------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- --------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- -----------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- -------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- ---------------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- -------
-------------- --------------
---------- -
- ------------- ----- -
-
--
-
-------------- -------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- ---------------
-------------- ----------------
---------- -
- ------------- ----- -
-
--
-
-------------- --------------------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- --------
-------------- ----------------
---------- -
- -------- --------- -
-
-
--
------ -
-- -------
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
---------- ------- -------- --
-
------------------
---------------
---------------
-------- -------
--
-----------------
--
-
-
------ ------- ----------在信息窗口中加入 HTML
我们可以通过自定义 InfoWindow 组件，实现在地图上展示更加多样化的内容。我们可以通过在 infoWindowChild 属性中传入 HTML 片段，在信息窗口中展示我们想展示的内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ - ------------- - ---- ---------------
----- ---------- ------- --------------- -
-------- -
------ -
---- ------------------------ -------- ------- ---- ----- ------- -------- -----
---------------------------
-------------------------------
------
--
-
-
----- ----------------- - -- ---- -- -- ------------------
----- --------- ------- --------------- -
------ ------------ - -
------- -
---- ------
---- -----
--
----- --
--
-- ----- ------ ---- --- ----
-----------------
------------------ -
-------------
-- -- --- ---
--------------------- - --- --------------- ---- -------------- -- -
-------- -------
---
-
-------- -
----- -------- - -
-
-------------- -----------------------------
---------- -
- ------------- ----- -
-
--
-
-------------- ------------------------------
---------- -
- ------------- ----- -
-
--
-
-------------- ------
-------------- -------------------
---------- -
- -------- --------- --
- ------------ ---- -
-
--
-
-------------- -----------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- --------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- -----------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- -------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- ---------------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- -------
-------------- --------------
---------- -
- ------------- ----- -
-
--
-
-------------- -------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- ---------------
-------------- ----------------
---------- -
- ------------- ----- -
-
--
-
-------------- --------------------------
-------------- ----------------
---------- -
- -------- --------- -
-
--
-
-------------- --------
-------------- ----------------
---------- -
- -------- --------- -
-
-
--
------ -
-- -- ---------- -- ---- --
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
---------- ------- -------- --
-
------------------
---------------
---------------
-------- -------
-----------------
-----------
--------- ------
------------------ ---- ----------------
--
-
--
-----------------
--
-
-
------ ------- ----------在上面的代码中，我们定义了一个 InfoWindow 组件，它是一个包含标题和描述的简单 HTML 片段。我们然后在 AnyReactComponent 组件的 infoWindowChild 属性中将这个组件传递给了 react-js-google-maps，来在标记上渲染信息窗口。
结语
本文介绍了如何使用 react-js-google-maps 包来在 React 应用中集成 Google 地图，并且通过设置样式和自定义信息窗口，来让你的地图看起来更加美观和专业。
希望这篇文章能够帮助你入门 react-js-google-maps，了解如何使用 Google Maps API 来为你的 web 应用提供开箱即用的地图、标记、路线和信息窗口等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f7681e8991b448e7a5a