javascript - 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 绑定(bind)到标记之前执行此操作:

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');
?>

但它只适用于弹出窗口已打开的第一个标记。

您是否知道任何解决方法或正确的方法？

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 的数据。

我的灵感来自这个 link