在前端开发中，使用地图组件是非常常见的需求之一。而 Google Map API 是其中最为常用的。如果你也在寻求一款易用的 Google Map API 包，那么 google-map-react-redo 就是一款非常不错的选择。
介绍 google-map-react-redo
google-map-react-redo 是一款基于 React 的 Google 地图封装组件类库。相较于原生 Google Map API 来说，google-map-react-redo 更易于使用和集成进现有的项目。此外，google-map-react-redo 被广泛应用于 React Native 中。
安装和使用
安装最新版本的 google-map-react-redo：
npm install --save google-map-react-redo
然后，在 React 中引入 google-map-react-redo：
import GoogleMapReact from 'google-map-react-redo';
接着，我们需要参考 Google Maps JavaScript API 的官方文档（传送门）中的说明，申请一个 API KEY。申请好的 API KEY 需要写入我们的代码中：
<GoogleMapReact
bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
/>现在，就可以愉快的使用 google-map-react-redo 啦！
基础用法示例
我们来看一个快速入门的示例：显示一个简单的地图，并打上一个 Marker：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------------- ---- ------------------------
----- --- ------- --------- -
------ ------------ - -
------- -
---- ------
---- ------
--
----- ---
--
-------- -
------ -
---- -------- ------- -------- ------ ------ ---
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
-
-------
---------------
---------------
-------- -------
------------
--
-----------------
------
--
-
-
----- ------ - ----- -- -
----- - ----- - - ------
------ -
---- -------- ------ ------ --------- ------ ---
-- -------------- -----------------------
------
--
--
------ ------- ----上述代码中，我们先定义了一个 Map 组件，该组件通过 GoogleMapReact 渲染一个地图。defaultCenter 和 defaultZoom 属性分别表示了地图的初始中心位置和缩放倍数。
在 GoogleMapReact 内部，我们插入了一个 Marker 组件。该组件通过经纬度坐标和颜色属性，定位自己在地图上的位置，并自定义了 Marker 显示的样式。
高级功能
在深入理解 google-map-react-redo 后，你将能够使用其更丰富的自定义功能。
自定义 Marker
在 google-map-react-redo 中，可以自定义 Marker 的样式、尺寸和标签等。
-- -------------------- ---- -------
----- ------ - ----- -- -
----- - ------ ---- - - ------
------ -
---- -------- ------ ------ --------- ------ ---
-- -------------- -----------------------
-------------
------
--
--
------- --------------- --------------- -------- ------- ------------ --设置 Marker 的点击事件
google-map-react-redo 提供了 onChildClick 回调函数，可以捕捉每个 Marker 的点击事件。
-- -------------------- ---- ------- ----------- - ----- ----------- -- - ---------------- ------------ -- --------------- ------------------- ---- -------------- -- --------------------------------- ----------------------------- ------------------------------- - ------- --------------- --------------- -------- ------- ------------ -- -----------------
聚焦 Marker
Google 地图提供了 fitBounds 方法可以聚焦某个区域。google-map-react-redo 也提供了 fitBounds 方法。在地图上使用聚焦效果时，我们需要通过 ref 获取 GoogleMapReact 的实例，并在 componentDidMount 中setProps。
componentDidMount() {
const bounds = new window.google.maps.LatLngBounds();
bounds.extend({ lat: 59.932, lng: 30.321 });
this.refs.map.fitBounds(bounds);
}
<GoogleMapReact ref="map" />自定义信息框
如果你需要在 Marker 身上展示详细的信息，那么 custom InfoWindow（即自定义信息窗口）就是你的不二选择。google-map-react-redo 提供了一个 InfoBox 组件，并将 Google Map API 的 InfoWindow 样式进行了改进。
引入 InfoBox 组件：
import InfoBox from 'google-map-react-redo/info-box';
定义一个 InfoBox 组件：
-- -------------------- ---- -------
--------
---------------
---------------
---------- ------------ --- ----------------------- ---- --
-
---- -------- ---------------- --------- -------- ----- -------- ------ ---
---- -------- --------- ------- ---------- ------- --------- ------------
------
----------总结
通过本文的介绍，我们学习了如何使用 google-map-react-redo 搭建自己的地图组件。
google-map-react-redo 组件类库的文档相当详尽，你可访问 Github 查看详情。祝你在应用 google-map-react-redo 中开心愉悦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005525181e8991b448cfd87