谷歌地图是一种流行的Web地图服务，它提供了一个API（应用程序编程接口），供开发人员使用JavaScript构建交互式地图应用程序。在谷歌地图API V3中，可以通过添加信息窗口来为每个地图标记提供更多的详细信息和交互功能。本文将介绍如何使用谷歌地图API V3添加信息窗口。
添加信息窗口到谷歌地图标记
要在谷歌地图中为标记添加信息窗口，您需要首先创建一个标记对象，例如：
--- ------ - --- -------------------- --------- --------- ---- ---- ------ --- ------- ---
然后，使用addListener()方法将信息窗口添加到标记对象中。以下是一个基本的信息窗口示例：
--- ---------- - --- ------------------------
-------- ------- ------ ----------------- -
-------- ---------- ----------- ----- -- ------------
---
--------------------------- ---------- -
-------------------- --------
---这个示例创建了一个信息窗口对象infowindow，其中包含标题和一些说明性文本。当用户单击标记时，信息窗口将在标记上方打开。调用open()方法将信息窗口添加到标记中，并指定要在哪个地图对象上显示。
在信息窗口中添加更多内容
除了标题和说明性文本之外，信息窗口还可以包含任意HTML内容。例如，您可以在信息窗口中添加图像、表格或超链接等元素，以提供更丰富的交互体验。
以下是一个更复杂的示例，其中信息窗口包含一张照片和一个超链接：
--- ---------- - --- ------------------------
-------- ------- ------ ----------------- -
----- --------------------------------------- -
--------- -- ----------------------------- ----------- --- ---- -----------------
---
--------------------------- ---------- -
-------------------- --------
---处理多个标记和信息窗口
如果您需要在谷歌地图中处理多个标记和信息窗口，则需要为每个标记和信息窗口创建单独的变量，并将它们添加到数组中以便进行遍历。
以下是一个示例，其中地图上有两个标记，每个标记都有自己的信息窗口：
--- ------- - -
-
--------- --- ------------------------------ --------------
------ ------- ---
-------- ----------- - ----------------------- -- ------ -------
--
-
--------- --- ------------------------------ --------------
------ ------- ---
-------- ----------- - ----------------------- -- ------ -------
-
--
--- ----------- - ---
--- ---- - - -- - - --------------- ---- -
--- ------ - --- --------------------
--------- --------------------
---- ----
------ ----------------
---
--- ---------- - --- ------------------------
-------- ------------------
---
-----------------------------
--------------------------- ---------- -
--- ---- - - -- - - ------------------- ---- -
-----------------------
-
-------------------- --------
---
-这个示例使用一个markers数组来保存标记的位置、标题和信息窗口内容。它还创建了一个infowindows数组，其中保存每个信息窗口对象。在遍历
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15667