Google Maps 是一个广受欢迎的地图展示服务，我们经常能够在很多网站上看到这个服务的应用。如果您开发的网站需要使用 Google Maps，并且还要运用到 React 技术栈，那么 google-maps-react 这个 npm 包可以让您的开发过程更加便捷。本文将会介绍 google-maps-react 如何使用。
1. 安装
使用 npm 的方式进行安装：
# npm npm install google-maps-react
2. 引入
import GoogleMapsReact, { Marker } from 'google-maps-react';
我们通过 import 引入 google-maps-react 的组件，其中，Marker 组件用于展示地图上的标记。
3. 使用
首先，在 Google Maps APIs 获取 API key，这是使用 google-maps-react 的前提。打开 Google Cloud Platform 控制台，找到您的项目并启用 Maps JavaScript API，就可以获得 API key。
-- -------------------- ---- -------
------ --------------- - ------ - ---- --------------------
----- --- ------- --------------- -
-------- -
------ -
---- --------------- -------- ------ ---------
---------------
------------------- ---- -------------- --
---------------- ---- -------- ---- -------- --
----------------
-
-------
-------------
--------------
--
-----------------
------
--
-
-在上面的示例代码中，我们创建了一个 Map 组件，其中的 div 标签样式定义了地图的高度和宽度。GoogleMapReact 组件里面我们通过 bootstrapURLKeys 属性传入我们在 Google Cloud Platform 获取到的 API key，同时设置了 defaultCenter 作为地图的中心位置，defaultZoom 为地图的缩放等级。同时我们添加了 Marker 组件来在地图上添加一个标记，并通过 lat 和 lng 属性定义了该标记的位置。
4. 事件监听
google-maps-react 提供了很多事件监听的接口，方便我们对 map 以及 marker 等进行自定义事件监听。
-- -------------------- ---- -------
------ --------------- - ------ - ---- --------------------
----- --- ------- --------------- -
----------------- - ------- ------- -- -- -
------------------- ------- -------- ------ ------- ---
--
-------- -
------ -
---- --------------- -------- ------ ---------
---------------
------------------- ---- -------------- --
---------------- ---- -------- ---- -------- --
----------------
-----------------------------
-
-------
-------------
--------------
--------------------------------
--
-----------------
------
--
-
-在上面的示例代码中，我们定义了一个 handleMarkerClick 方法，并在 Marker 组件中通过 onClick 属性进行绑定。当该 Marker 组件被点击时，handleMarkerClick 方法将被触发，并输出一段 console.log。
5. 总结
使用 google-maps-react 让我们在 React 的开发过程中更加方便地使用 Google Maps 服务。通过本文的介绍，您现在应该可以快速上手 google-maps-react 了。最后附上一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- - ------ - ---- --------------------
----- --- ------- --------------- -
----------------- - ------- ------- -- -- -
------------------- ------- -------- ------ ------- ---
--
-------- -
------ -
---- --------------- -------- ------ ---------
---------------
------------------- ---- -------------- --
---------------- ---- -------- ---- -------- --
----------------
-----------------------------
-
-------
-------------
--------------
--------------------------------
--
-----------------
------
--
-
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/96602