Question

我正在使用传单库。我正在一个将自定义标记放置在地图上的项目中。放置后，标记具有“ click”事件触发，该事件将打开一个带有两个按钮的弹出窗口。这些按钮出现，但在控制台中都返回undefined。有人知道为什么吗？

这是我的代码，从这个stackoverflow问题得到很多帮助：

// Define event for clicking on Markers

function renameDeleteChoice(e) {

var choicePopUp = L.popup();
var container = L.DomUtil.create('div'),
  renametBtn = this.createButton('Rename', container),
  deleteBtn = this.createButton('Delete', container);

choicePopUp
  .setLatLng(e.latlng)
  .setContent(container)
  .openOn(myMap);

  L.DomEvent.on(renameBtn, 'click', () => {
    alert("My name is renameBtn. I have been clicked");
  });

  L.DomEvent.on(deleteBtn, 'click', () => {
    alert("My name is deleteBtn. I have been clicked.");
  });
}

function createButton(label, container) {
    var btn = L.DomUtil.create('button', '', container);
    btn.setAttribute('type', 'button');
    btn.innerHTML = label;
    return btn;
}

上面是在div中创建按钮的功能。以下是用于创建自定义标记的代码，并且事件函数嵌套在其中：

// Creates the custom markers added by the user and stores them to 
// localStorage

var markers = [];
var customLayer = new L.layerGroup();
myMap.on('contextmenu', function(e) {
      var marker = L.marker(e.latlng,
      {icon : flagIcon}).addTo(customLayer).addTo(myMap);
      marker.bindTooltip("<b>Custom</b>", {permanent: true, offset: [-20, 
20],direction: "bottom"});
      customLayer.addTo(myMap);
      markers.push({ coords: e.latlng, name: "<b>Custom</b>" });

// Defines the choice between the two buttons on click

      marker.on('click', function(e) {
        renameDeleteChoice(e);
});

起初，我认为这是一个范围问题，所以我尝试了几种变体，但无法使其正常工作。然后，我尝试使用el.id方法为每个按钮分配一个id，然后将每个按钮分配给具有document.getelementById的变量，但这也不起作用。如果有人需要，这是该库的文档。

https://leafletjs.com/reference-1.3.4.html

谢谢您的指导。

Answer 1

在阅读了一些文档之后，我建议尝试下一次修改并检查开发者控制台中的消息：

FISRT

L.DomEvent.on(renameBtn, 'click', function(ev) {
    console.log('Rename button clicked!');
});

L.DomEvent.on(deleteBtn, 'click', function(ev) {
    console.log('Delete button clicked!');
});

第二

L.DomEvent.on(renameBtn, 'click', function(ev) {
    console.log('Rename button clicked!');
}, this);

L.DomEvent.on(deleteBtn, 'click', function(ev) {
    console.log('Delete button clicked!');
}, this);

另外，请遵循@Pal Singh的建议：

function renameDeleteChoice(e)
{
    var choicePopUp = L.popup();
    var container = L.DomUtil.create('div'),
    renametBtn = this.createButton('Rename', container),
    deleteBtn = this.createButton('Delete', container);

    // Here try First and Second options mentioned previously.
    L.DomEvent.on(renameBtn, 'click', function(ev) {
        console.log('Rename button clicked!');
    });

    L.DomEvent.on(deleteBtn, 'click', function(ev) {
        console.log('Delete button clicked!');
    });

    choicePopUp.setLatLng(e.latlng).setContent(container).openOn(myMap);
}

Answer 2

我相信按钮返回未定义的原因是因为它们只是被称为元素。那使他们空了。无论哪种情况，我都想针对发现的问题发布解决方案：

首先，我们创建两个按钮，并将它们包装在父div中。为每个元素赋予唯一的ID。

<div id="choiceContainer">
<button id="renameBtn" name="button">Rename</button>
<button id="deleteBtn" name="button">Delete</button>
</div>

将函数定义为单击事件后发生的情况。由于父div已经包含两个按钮，因此当您调用该函数时，它们将在div内填充。单击每个按钮将生成相应的消息。

function renameDeleteChoice(e) {

var choicePopUp = L.popup();
var container = document.getElementById('choiceContainer');
var renameBtn = document.getElementById('renameBtn');
var deleteBtn = document.getElementById('deleteBtn');


choicePopUp.setLatLng(e.latlng).setContent(container).openOn(myMap);

  L.DomEvent.on(renameBtn, 'click', function(ev) {
      console.log('Rename button clicked!');
  }, this);

  L.DomEvent.on(deleteBtn, 'click', function(ev) {
      console.log('Delete button clicked!');
  }, this);
}

这是我们调用函数的地方。调用此函数或任何函数时，请记住作用域。如果可以经常重用，那么全局范围可能是个好主意。

   marker.on('click', function(e) {
   renameDeleteChoice(e);

为什么这些按钮未定义？

2 个答案: