Leaflet 是一款轻量级且易于使用的开源 JavaScript 地图库，它提供了丰富的地图功能和可扩展性。在 Leaflet 中，Marker 是一种用于添加图形标记到地图上的核心对象。Click 事件是指单击某个元素时触发的响应事件。
本文将向您介绍如何在 Leaflet 中使用 Marker 和 Click 事件来实现一些有趣的地图交互功能。
Marker
Marker 是 Leaflet 中最常用的对象之一，它表示地图上的一个点，并可以设置不同的图标、大小、颜色等属性。以下是创建一个简单 Marker 的示例代码：
----- ------ - --------------- -------------------
这里我们在坐标 [51.5, -0.09] 处创建了一个 Marker，并将它添加到地图上。
除了位置外，Marker 还可以设置很多其他属性。例如：
----- ------ - --------------- ------- -
----- --------
-------- -------------
--------- ---- ----
----------- ---- ----
------------ --- ----
---
------ --- -------
--------------在上面的示例中，我们在 Marker 上设置了一个自定义图标和标题。
Click 事件
Click 事件是指单击地图或 Marker 等元素时触发的响应事件。在 Leaflet 中，我们可以使用 on() 方法来监听点击事件。如下是一个简单的示例：
------------------ ---------- -
------------- -----------
---当用户单击 Marker 时，将会弹出一个提示框。
示例
下面是一个结合了 Marker 和 Click 事件的实际示例。该示例中，在地图上添加了多个 Marker，并且每个 Marker 都绑定了一个 Click 事件。当用户单击某个 Marker 时，会弹出该 Marker 的标题和位置信息。
----- ------- - -
- ----- --------- --------- -------- ------ --
- ----- -------- --------- --------- ------- --
- ----- ---- ------ --------- --------- -------- -
--
-------------------------------- -
----- - - ------------------------- -
------ ------------
------------ ----
--------------
------------- ---------- -
---------------------- ---------------------
---
---在上面的示例中，我们循环遍历了一个包含三个城市 Marker 的数组。对于每个 Marker，我们都绑定了一个 Click 事件。当用户单击某个 Marker 时，将会弹出一个提示框，显示该 Marker 的标题和位置信息。
总结
本文向您介绍了 Leaflet 中 Marker 和 Click 事件的基本用法和示例代码。通过对这些知识的掌握，您可以在 Leaflet 中实现更加丰富和有趣的地图交互功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29948