谷歌地图 API V3 提供了强大的功能，可以轻松地向地图上添加自定义标记。然而，当需要根据特定事件或状态更改标记的图标时，很多开发者不知道从何入手。本文将介绍如何使用 JavaScript 和谷歌地图 API V3 动态地更改标记图标。
创建标记
在开始之前，我们先创建一个简单的标记并放置于地图上：
--- ------ - --- -------------------- --------- - ---- --- ---- -- -- ---- --- ---
这里的 position 属性指定了标记的经纬度坐标，而 map 属性则指定了该标记所属的地图对象。
更改标记图标
要更改标记的图标，我们需要使用 setIcon() 方法。该方法接受一个包含图标 URL 的对象作为参数，代码如下：
---------------- ---- -------------------------------------- ----- --- -------------------- ---- ----------- --- -------------------- --- ---
其中 url 属性指定了图标的 URL 地址，size 属性指定了原始图标的大小，scaledSize 属性指定了变换后图标的大小，这两个属性可以设置为相同的值以保持原图标大小。
动态更改标记图标
要动态更改标记的图标，我们可以通过监听事件来实现。例如，假设我们在地图上有多个标记，要在单击某个标记时将其图标更改为另一个图标。代码如下：
-- -------------
--- ------- - -
--- --------------------
--------- - ---- --- ---- -- --
---- ----
----- -----------------------------------
---
--- --------------------
--------- - ---- --- ---- -- --
---- ----
----- -----------------------------------
--
--
-- ------
-------------------------------- -
--------------------------- ---------- -
-- ------
-- --------------------- --- ------------------------------------ -
----------------
---- ------------------------------------
----- --- -------------------- ----
----------- --- -------------------- ---
---
- ---- -
----------------
---- ------------------------------------
----- --- -------------------- ----
----------- --- -------------------- ---
---
-
---
---在以上代码中，我们先创建了两个具有不同图标的标记，并将它们添加到地图上。接着，我们通过 addListener() 方法为每个标记添加了一个单击事件监听器。当用户单击标记时，该监听器会检查当前图标的 URL 地址，然后将其更改为另一个 URL 地址。
总结
本文介绍了如何使用 JavaScript 和谷歌地图 API V3 动态地更改标记图标。通过监听事件和调用 setIcon() 方法，我们可以在地图上创建交互性更强的自定义标记。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10902