Question

我可以在Leaflet弹出窗口中创建一个输入字段，通过遵循此处发布的解决方案来编辑GeoJSON属性：

我想在弹出窗口中添加一个常量字符串，以便弹出窗口显示“在此处编辑您的数据：[使用可编辑数据输入]”

当我尝试这样做时，输入框失败并返回字符串'[object HTMLInputElement]'。

如何避免这种情况？

var input = L.DomUtil.create('input', 'my-input');

input.value = feature.properties.datatoedit;
L.DomEvent.addListener(input, 'change', function() {
  feature.properties.datatoedit = input.value;
});

var popupcontent = "<b>Edit Data Here: </b><br>" + input;

layer.bindPopup(popupcontent);

Answer 1

欢迎来到SO！

您必须意识到"Edit Data Here: " + input正在尝试将字符串与 HTML元素连接起来。

这样做时，JS引擎会尝试将input转换为字符串，这会呈现您的'[object HTMLInputElement]'字符串。

相反，您应该将"Edit Data Here: "部分转换为HTML元素（也可以是片段），以便您可以将其与input一起插入并将其作为弹出窗口的HTML节点提供内容。

// Create an HTML Element container for both your string and input.
var popupContent = document.createElement('div');

// Fill it first with your raw HTML code.
// It will automatically be parsed and converted as HTML nodes.
popupContent.innerHTML = "<b>Edit Data Here: </b><br>";

// Now you can append your `input` which is already an HTML Element.
popupContent.appendChild(input);

layer.bindPopup(popupContent);

演示：http://plnkr.co/edit/W11Z95Y9dQZThBu2dKQz?p=preview

在HTML元素之前附加字符串

1 个答案: