Leaflet: 如何为弹出窗口添加点击事件监听器？

Question

我是一名有用的助手，可以为您翻译文本。

我第一次使用Leaflet库，想要为每个标记添加一个弹出窗口的点击事件监听器。

这是我的代码：

for (var i = 0; i < users.length; i++) {
  var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
    .on('mouseover', function() { this.setIcon(iconOn); })
    .on('mouseout', function() { this.setIcon(iconOff); })
    .addTo(map);

  var myPopup = L.popup()
    .setContent("<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>");

  marker.bindPopup(myPopup).openPopup();
}

我尝试将MouseEvent附加到弹出窗口，在将myPopup绑定到标记之前进行此操作：

myPopup.on('click', function() { alert("Hello"); })

但是它没有起作用。我还尝试添加以下jQuery代码（我正在使用Bootstrap，点击弹出窗口应该显示一个模态框）：

  $("#info").click(function() {
    $("#userTitle").html(users[i].title).html();
    $("#userAddr").html(users[i].addr).html();
    $("#userDesc").html(users[i].desc).html();

    $("#userDetails").modal("show");
  });

这是 HTML 代码：

<?php
  $title = "Map";
  $scriptsH = array('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js', 'js/showmap.js');
  require_once('header.php');
?>
    <div class="cointainer">
        <div id="map-canvas">
        </div>
  </div>
  <div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userTitle"></h4>
      </div>
      <div class="modal-body">
          <p id="userDesc"></p>
          <p id="userAddr"></p>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
    </div>
      </div>
    </div>
  </div>
<?php
  require_once('footer.php');
?>

但它只对已经打开弹出窗口的第一个标记起作用。

你知道任何解决方法或正确的操作方式吗？

- smartmouse

---

我认为Leaflet Popup不支持任何事件。 - Vigneswaran Marimuthu

@akshay：你需要什么？ - smartmouse

@AkshayKhandelwal：我编辑了我的问题，请看一下。 - smartmouse

@smartmouse 可能是一种不太正规的方法。将内联 onclick 监听器添加到弹出内容（根元素）。 - Vigneswaran Marimuthu

我尝试了这段代码：document.getElementById("info").addEventListener("click", function() { console.log("hello"); }); 但它的行为与 $("#info").click() 相同。 - smartmouse

Answer 1

发现了最终的解决方法！它有效：

这是我的更新代码：

for (var i = 0; i < users.length; i++) {
    (function (user) {
        var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
            .on('mouseover', function() { this.setIcon(iconOn); })
            .on('mouseout', function() { this.setIcon(iconOff); })
            .addTo(map);

        var myPopup = L.DomUtil.create('div', 'infoWindow');
        myPopup.innerHTML = "<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>";

            marker.bindPopup(myPopup);

        $('#info', myPopup).on('click', function() {
            $("#userTitle").html(users[i].title).html();
            $("#userAddr").html(users[i].addr).html();
            $("#userDesc").html(users[i].desc).html();

            $("#userDetails").modal("show");
        });
    })(users[i]);
}

正如您所看到的，我使用L.DomUtil（DOM元素）而不是L.Popup（字符串）来创建弹出窗口的内容。

此外，在我的情况下，我添加了一个匿名函数来处理JSON数据。

我受到了这个链接的启发。

- smartmouse

Answer 2

另一种可能的方式是将事件监听器绑定到弹出窗口的元素上。

例如：

    var popup = L.popup({offset   : new L.Point(0,-24), 
                         className: 'some-class'})
                             .setLatLng(latlng)
                             .setContent(content)
                             .openOn(map);

    // can access popup._container or popup.contentNode
    $(popup._closeButton).one('click', function(e){
        //do something
    });

- Yvonne Ng