在开发前端应用时，地图是一种常见的功能模块，而在集成地图模块时，使用谷歌地图 API 是一个较好的选择。在使用 react-google-map-image 包前需要先获取到 Google Maps API Key。
安装
第一步是安装 react-google-map-image 包。你可以使用 npm 或 yarn 来安装它：
使用 npm：
npm install react-google-map-image
使用 yarn：
yarn add react-google-map-image
示例代码
下面是一个例子，表示如何将 react-google-map-image 包添加到您的 React 应用中。该代码需要一个 Google Maps API Key 用于加载地图：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------------
----- --- ------- --------------- -
-------- -
------ -
---- -------- ------- -------- ------ ------- ---
---------- ---------- ------ ---- --- ---- --------- ---- ---------- ---- --------- -- --------- --
------
--
-
-
------ ------- ----这个代码片段在创建一个 800 像素 x 600 像素的地图，中心坐标50.1.8833度N, 8.65度E，缩放级别为 14。apiKey 参数是你从 Google API Console 获取的开发 API key。
如果一切顺利，现在应该能在页面上看到一个谷歌地图！
此外，还可以通过 props 参数来对地图进行更多自定义，比如显示或隐藏缩放控件。以下是一个展示缩放控件的示例代码：
<GoogleMap
apiKey="你的 Google Maps API Key"
center={{ lat: 51.516835, lng: -0.112522 }}
zoom={14}
zoomControl={true}
/>指导意义
在开发地图模块时，使用谷歌地图 API 是一个较好的选择，而 react-google-map-image 包让我们能够快速的将地图模块与 React 应用集成。当然，我们还需要了解地图 API 的使用技巧以及 react-google-map-image 包的更多特性，这样才能在实际开发中更好的应用它们。
学习
如需了解有关使用地图 API 的更多信息和技巧，请参阅 Google Maps API 文档。如果想在 React 应用中使用地图，了解 react-google-map-image 包的更多特性则可以让你更好地发挥地图模块的潜力。你可以通过查看该包的文档，或阅读其源代码来了解更多。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668781e8991b448e2ba5