在React中集成Google Maps API本身是一项挑战，但如果你想要在Google Maps中添加自定义信息窗口，则变得更加困难。不幸的是，Google Maps API自身并没有提供这种功能，因此我们需要使用第三方库来实现它。
在这篇文章中，我们将探讨如何使用npm包@react-google-maps/infobox来添加自定义信息窗口。
简介
@react-google-maps/infobox是一个可用于React应用程序的npm包。它提供了一个覆盖物来显示自定义信息窗口。此组件扩展自Google Maps API中的InfoWindow类。
此组件的主要功能如下：
- 显示自定义内容（HTML和React组件）。
- 可以在信息窗口上放置不同的事件处理器（例如点击事件）。
- 可以显示多个信息窗口（一个infoBox实例可以用于显示多个信息窗口）。
安装
要安装此npm包，请使用以下命令：
npm install @react-google-maps/infobox
要使用此包，您还需要安装以下包：
npm install --save google-map-react npm install --save react-google-maps
@react-google-maps/infobox将在这些包中使用的Google Maps API组件上运行。
使用
让我们看看如何使用@react-google-maps/infobox。
导入
首先，让我们导入所需的组件：
import React, { Component } from 'react';
import { InfoBox } from "@react-google-maps/infobox";
import GoogleMapReact from 'google-map-react';
import logo from './logo.svg';
import './App.css';渲染
接下来，让我们创建一个带有信息窗口的Google Maps组件：
-- -------------------- ---- -------
----- --- ------- --------- -
------ ------------ - -
------- -
---- ------
---- -----
--
----- --
--
-------- -
------ -
---- -------- ------- -------- ------ ------ ---
---------------
------------------- ---- -------------- --
---------------------------------
-----------------------------
-
--------
-----------------------------------
---------- ------------ --- ----------------------- ---- --
-
---- -------- ---------------- --------- -------- ----- -------- ------ ---
---- -------- --------- ------- ---------- --------- ---
------ --------
------
------
----------
-----------------
------
--
-
-此处，我们创建一个具有默认中心坐标和缩放级别的Google Maps组件，并在其中添加了一个InfoBox。我们为InfoBox设置了默认位置和选项。
选项
以下是InfoBox组件的一些选项：
- closeBoxURL：要在信息窗口上放置的“关闭”图标的URL。
- enableEventPropagation：是否在信息窗口上启用事件冒泡。
- pixelOffset：信息窗口相对于其默认位置的像素偏移量。
事件处理器
您还可以在InfoBox组件中添加事件处理程序。例如，要将单击事件附加到信息窗口，可以使用以下代码：
<InfoBox
defaultPosition={this.props.center}
options={{ closeBoxURL: "", enableEventPropagation: true }}
onClick={() => alert("Hello, Beijing!")}
>显示多个信息窗口
要在Google Maps中显示多个信息窗口，您需要使用一个infoBox实例。在此实例上设置选项和事件处理程序，然后通过 InfoBox的proptypes属性 注入它：
-- -------------------- ---- -------
------ --------- ---- -------------
------ ------- ---- -----------------------------
----- --------------- ------- --------- -
-------- -
----- - --------- --------------- -------------- --------- ------ - - -----------
------ -
--------
--------------------------
------------------------
----------------------
---------------
-
----------
----------
--
-
-
------------------------- - -
--------- ---------------
--------- -----------------
--------------- -----------------
-------------- -----------------
------- --------------
--现在您可以使用InfoBoxInstance组件来显示多个信息窗口。
示例代码
完整的使用示例可以在GitHub上找到：
https://github.com/tomchentw/react-google-maps/tree/master/examples/infobox
总结
在本教程中，我们介绍了如何在React中使用@react-google-maps/infobox组件来添加自定义信息窗口。我们了解了如何设置选项和事件处理程序，并学习了如何使用该组件的proptypes属性来支持多个信息窗口。
希望本文对您有所帮助，可以帮助您更好地使用Google Maps API在React中构建具有信息窗口的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedadacb5cbfe1ea0610ce7