1

我正在使用 Leaflet，但我的标记很少。因此，当将鼠标悬停在标记上时，会打开一个弹出窗口，在该弹出窗口中，有一个复选框。所以我需要的是，每当用户单击该复选框时，它应该更改弹出内容。例如，

复选框名称为更多信息。默认弹出窗口包含悬停后的纬度和经度。当用户单击该复选框时，弹出窗口应显示城市、州以及纬度和经度。我在复选框中创建了一个带有onchange事件内部函数的复选框，但它没有调用创建的角度函数，而是在寻找 JavaScript 函数。我怎样才能调用 Angular 函数，或者是否有任何其他解决方法来实现它？

我用过以下方法，

<input type="checkbox" onchange="showDetails(this);"/>
<input type="checkbox" onchange={{showDetails(this);}}/>

我的示例代码看起来像这样

L.Routing.control({
    waypoints: waypoints,
    lineOptions: {
      styles: [{color: '#453f30', opacity: 1, weight: 5}],
      addWaypoints: false,
      extendToWaypoints: false,
      missingRouteTolerance: 0,
    },
    plan: L.Routing.plan(waypoints, {
      createMarker: function (i, wp) {
        return L.marker([latitude, longitude], {
          icon: icon,
        }).bindPopup('<input type="checkbox" onchange={{showDetails(this);}}/>More Info', {
          closeButton: true,
        }).on("mouseover", function (event) {
          event.target.openPopup();
        });
      }
    })
  }).addTo(this.map);
4

1 回答 1

1

您非常接近解决方案。您可以像上面那样使用popupopen与事件相同的事件。mouseover你的复选框应该是这样的。

<input type="checkbox" id="chkbox1"/>

然后执行以下操作，

}).bindPopup('<input type="checkbox" id="chkbox1"/>More Info', {
  closeButton: true,
}).on("mouseover", function (event) {
  event.target.openPopup();
}).on("popupopen", function (event) {
    // Here I am using JQuery. You can add JQuery to your Project
    $("#chkbox1").on("click", e => {
        e.preventDefault();
        
        if ($("#chkbox1").is(":checked")) {
            // your code goes here if checked
        } else {
            // 
        }
    });
});
于 2021-06-28T19:00:41.793 回答