Question

我第一次使用Leaflet库，我会在弹出窗口中为每个标记添加一个click事件监听器。

这是我的代码：

while($check == TRUE && $i< count($match))
{
    if($match[$i] == $value->meta_key)
    {
        echo $i . ' ';
        echo ' inne ';
        $check = FALSE;
        break;
    }   

    $i++;   
}

我尝试将MouseEvent附加到弹出窗口，在将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(); }绑定到标记之前执行此操作：

myPopup

但它不起作用。我还尝试添加以下jQuery代码（我正在使用Bootstrap并点击弹出窗口来显示模态）：

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

以下是HTML代码：

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

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

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

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

Answer 1

找到最终解决方法！它有效：

这是我更新的代码：

<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty.js"></script>

如您所见，我使用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]); }（DOM元素）而不是L.DomUtil（字符串）创建弹出窗口的内容，以便为弹出窗口创建内容。另外，在我的情况下，我添加了一个匿名函数来处理来自JSON的数据。

我受到link

的启发

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
    });

Leaflet：如何在弹出窗口中添加click事件监听器？

2 个答案: