谷歌地图是一种在前端开发中常用的工具。有时候，我们需要在地图上显示一些自定义的信息，例如商家名称、地址等，这时候就需要使用自定义的信息窗口。本文将介绍如何在谷歌地图上创建一个自定义的信息窗口。
前置条件
在开始创建自定义信息窗口之前，您需要确保已经：
- 有一个谷歌地图 API 密钥
- 在 HTML 文件中引入了 Google Maps JavaScript API 库
- 创建了一个谷歌地图实例
创建信息窗口的步骤
- 定义一个
InfoWindow对象
要在谷歌地图上创建一个自定义的信息窗口，首先需要定义一个InfoWindow对象。InfoWindow对象是一个谷歌地图 API 中用于显示与地图上某个地点相关的信息的面板。可以通过以下代码创建一个InfoWindow对象：
const infoWindow = new google.maps.InfoWindow();
- 在信息窗口中添加内容
接下来，需要在信息窗口中添加所需的内容。可以在信息窗口中添加各种元素，例如文字、图片、链接等。以下代码展示如何在信息窗口中添加一个标题和一张图片：
infoWindow.setContent(`
<div>
<h3>商家名称</h3>
<img src="image.jpg" alt="商家图片">
</div>
`);- 监听地图上的事件
为了在用户与地图交互时显示信息窗口，需要监听地图上的事件。例如，可以在用户点击某个标记点时显示信息窗口。以下代码展示如何在用户点击标记点时显示信息窗口：
-- -------------------- ---- ------- ----- ------ - --- -------------------- --------- - ---- -------- ---- --------- -- ---- ---- ------ ------ --- --------------------------- -- -- - -------------------- -------- ---
在这段代码中，首先创建了一个标记点，并将其添加到地图上。然后，在标记点上添加了一个click事件监听器，当用户点击标记点时，信息窗口就会出现。
示例代码
下面是一个完整的示例代码，包括创建自定义信息窗口和在地图上显示它的操作：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------
------- ------------------------------------------------------------------------
--------
-------- --------- -
----- --- - --- ----------------------------------------------- -
------- - ---- -------- ---- --------- --
----- ---
---
----- ---------- - --- -------------------------
----- ------ - --- --------------------
--------- - ---- -------- ---- --------- --
---- ----
------ ------
---
--------------------------- -- -- -
-----------------------
-----
-------------
---- --------------- -----------
------
---
-------------------- --------
---
-
---------
-------
---- -
------- ------
------ -----
-
--------
-------
----- -------------------
---- ---------------
-------
-------总结
本文介绍了如何在谷歌地图上创建一个自定义的信息窗口。通过定义InfoWindow对象、添加内容和监听地图事件，可以轻松地在谷歌地图上显示自己定义的信息窗口。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10956
