React Google Maps 是一个整合 Google Maps API 的 React 包，使得在 React 项目中使用 Google 地图及其相关服务变得更加容易。本文将详细介绍 npm 包 react-googlemaps 的使用方法，包括安装、配置和示例代码等。
安装
使用 npm 包管理工具，可以轻松地安装 react-googlemaps：
npm install react-googlemaps
配置
获取 API Key
在使用 Google Maps API 前，我们需要获取一个 API Key。在 Google 开发者控制台 中为项目创建一个 API Key，具体步骤如下：
登录 Google 开发者控制台，在左上角选择一个项目，或者点击“新建项目”创建新项目。
在项目的“库”中启用 Google Maps JavaScript API。启用后，在“凭据”中可以生成或者查看 API Key。
在“API 密钥”页面点击“添加凭据”，然后选择“API 密钥”>“创建 API 密钥”。
选择“Web 服务 API”，然后输入您的 IP 地址或限制 API Key 访问的域名。如果您不限制 IP 地址或域名，则任何人都可以使用您的 API Key。点击“创建”，最终生成一个 API Key。
配置
在 React 项目中配置 react-googlemaps，需要首先导入它：
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';然后，您需要使用 google-map-react 组件。该组件需要两个必需属性：center 和 zoom，它们分别指定地图的中心和缩放级别。
-- -------------------- ---- -------
----- --- ------- --------- -
-------- -
------ -
---- -------- ------- ------- ------ ------ ---
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
-
--- --- ---- -------- --------- --- ----- -------- ---
-----------------
------
--
-
-
---------------- - -
----- ---
------- - ---- -------- ---- -------- -
--示例代码
以下是一个包含标记（marker）和弹出窗口的示例代码，您可以在其中添加自己的标记和弹出窗口：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------------- ---- -------------------
------ ------ ---- -----------
----- --- ------- --------- -
------ ------------ - -
------- - ---- ---------- ---- ---------- --
----- --
--
-------- -
------ -
---- -------- ------- ------- ------ ------ ---
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
-
------- --------------- ---------------- ------------
-----
------- ---- ---------
------
---------
-----------------
------
--
-
-
------ ------- ------ -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------ ------- --------- -
------ ------------ - -
----- -----
--
-------- -
----- - ---- - - -----------
------ -
---- -------------------
----- -- ---- --------------------------------------------------------
---- ----------------------- --
------
--
-
-
------ ------- -------以上代码创建了一个名为 Marker 的组件，将其作为子组件传递给 GoogleMapReact，并在组件中添加了一个弹出窗口。
此外，还可以在组件中添加其他地图层级，如天气、道路和卫星图像等等。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------------- ---- -------------------
------ ------ ---- -----------
----- --- ------- --------- -
------ ------------ - -
------- - ---- ---------- ---- ---------- --
----- --
--
-------- -
------ -
---- -------- ------- ------- ------ ------ ---
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
-
------- --------------- ---------------- ------------
-----
------- ---- ---------
------
---------
------------ --------------- ---------------- --
------------ --------------- ---------------- --
-------------- --------------- ---------------- --
-----------------
------
--
-
-
----- ----------- ------- --------- -
-------- -
------ -
---- -------------------------
---- ------------------------------------------------------------------------------------------------------------------------------------------------------------ --
------
--
-
-
----- ----------- ------- --------- -
-------- -
------ -
---- -------------------------
---- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ --
------
--
-
-
----- ------------- ------- --------- -
-------- -
------ -
---- ---------------------------
---- ----------------------------------------------------------------------------------------------------------------------------------------------------- --
------
--
-
-
------ ------- ----总结
通过 npm 包 react-googlemaps 的使用教程，本文详细介绍了如何在 React 项目中整合 Google Maps API，并添加地图层级和自定义标记等功能，可以帮助前端开发者更好地应用 Google Maps API 到项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205149