简介
Google Maps 是一个非常强大的地图 API，为我们提供了丰富的数据和功能，但是它的使用却不是很友好，尤其是在前端开发中。@huygn/google-map-react 就是一个基于 Google Maps 的 React 组件库，它能够更加简便地在 React 项目中使用 Google Maps 的功能。
本文将为大家详细介绍 @huygn/google-map-react 的使用方法，包括如何安装、如何初始化地图并添加 Marker 和 InfoWindow 等。
安装
首先你需要在你的项目中安装 @huygn/google-map-react：
npm install --save @huygn/google-map-react
初始化地图
在使用 @huygn/google-map-react 前，你需要先在 Google Cloud Console 上申请一下 Google Maps API Key。假设你已经申请了 API Key，并将其保存在一个名为 .env 的文件中：
REACT_APP_GOOGLE_MAPS_API_KEY=Your_API_Key
在你的 React 项目中，你需要引入 GoogleMapReact 组件并传递 API Key、地图中心点和缩放级别等参数：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- --------------------------
----- ----------------- - -- ---- -- -- ------------------
----- --- ------- --------------- -
------ ------------ - -
------- -
---- ------
---- ------
--
----- ---
--
-------- -
------ -
---- -------- ------- -------- ------ ------ ---
---------------
------------------- ---- ----------------------------------------- --
---------------------------------
-----------------------------
-
------------------ --------------- --------------- -------- ------- --
-----------------
------
--
-
-
------ ------- ----在这个例子中，我们创建了一个名为 Map 的组件，并将 GoogleMapReact 组件作为它的子组件。我们还通过传递 bootstrapURLKeys 属性来指定 Google Maps API Key。默认的中心点和缩放级别分别指定为 center 和 zoom 属性。
我们还创建了一个名为 AnyReactComponent 的组件作为地图上的 Marker，它的位置通过 lat 和 lng 属性来指定。
现在你可以在浏览器中预览你的地图了！
添加 Marker 和 InfoWindow
GoogleMapReact 组件不仅能够帮助我们在地图上展示 Marker，还能够在 Marker 上新增 InfoWindow。
我们可以通过创建一个名为 InfoWindow 的组件，并将它添加在 AnyReactComponent 组件上来展示 Marker 的 InfoWindow。
-- -------------------- ---- -------
----- ---------- - -- ---- -- -- -
---- -------- ---------------- --------- -------- ----- -------- ------- ------------- ----- ---
---- -------- --------- ------- ---------- --------- ---------------
------
--
----- --- ------- --------------- -
------ ------------ - -
------- -
---- ------
---- ------
--
----- ---
--
-------- -
------ -
---- -------- ------- -------- ------ ------ ---
---------------
------------------- ---- ----------------------------------------- --
---------------------------------
-----------------------------
-
------------------ --------------- --------------- -------- --------
----------- ------------ ------- --
--------------------
-----------------
------
--
-
-在这个例子中，我们创建了一个名为 InfoWindow 的组件，在它的 style 中指定了 InfoWindow 的样式。我们还将 InfoWindow 组件添加到了 AnyReactComponent 组件中来展示它。
现在你可以在浏览器中看到 Marker 和它的 InfoWindow 了！你还可以在你的项目中进行更多的操作，比如添加事件响应等。
结论
通过本文的介绍，你应该已经学会了如何使用 @huygn/google-map-react 在 React 项目中展示 Google Maps，以及如何添加 Marker 和 InfoWindow。Google Maps API 提供了很多强大的功能，你现在可以自由探索它的各种功能了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b081e8991b448dfedb