使用HTML字符串将HTML元素连接到Leaflet的bindPopup

Question

我正在尝试通过layer.bindPopup来编写要素属性的功能以用于Leaflet功能。在这一点上，我几乎所有我需要的东西，除了最后一件事：Documentation是说layer.bindPopup需要HTML字符串或HTML元素，所以我需要连接我的HTMLString与两个元素：saveChanges按钮和speed_input输入，然后提供layer.bindPopup与它。任何使用$.append的操作都没有帮助。有关如何解决这个问题的任何建议？

function onEachArc(feature, layer) { 
      // Create an input 
      var speed_input = L.DomUtil.create('input', 'speed'); 

      // Set a feature property as value 
      speed_input.value = feature.properties.speed; 

      // Add a listener to watch for change on time input 
      L.DomEvent.addListener(speed_input, 'change', function(){ 
       // Change the value of speed 
       feature.properties.speed = speed_input.value; 
      }); 

      // Bind popup to layer with input 
      HTMLString = '<table style="width:100%">\ 
       <tr style="background-color:grey">\ 
       <th><b>Arc Numer: </b>' + feature.properties.linkstr + '</br></th>\ 
       </tr>\ 
       <tr>\ 
       <td><b>Speed: </b> ' + feature.properties.speed + '.</div></td>\ 
       </tr>\ 
       </table>'; 

      var saveChanges = document.createElement('button'); 
      saveChanges.innerHTML = 'Save Changes'; 
      saveChanges.onclick = function(){ 
       $.ajax({ 
         type:"POST", 
         url:"php/updateFeature.php", 
         data: {feature: feature}, 
         success: function(data){ 
           $('#test').html(data); 
          } 
        }); 
        //return false; 
        } 
       }; 

       /* 
       This did not help 
       var box = document.createElement("div"); 
        box.style.width = "100px"; 
        box.style.height = "100px"; 
       $("#box").append("#saveChanges"); 
       layer.bindPopup(box); 
       */ 

       layer.bindPopup(saveChanges); 
      }; 

Answer 1

你可以使用innerHTML：

的Element.innerHTML属性设置或获取描述元素的后代的HTML语法。

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

form.innerHTML = '<input type="text" class="my-input" />'; 

var button = L.DomUtil.create('button', 'my-button', form); 
button.textContent = 'Ok!'; 

http://plnkr.co/edit/DiK1zj?p=info

，或者使用outerHTML：

在返回时，内容包含描述元件及其后代中串行化HTML片段。

var inputHTML = '<input type="text" class="my-input" />'; 

var button = L.DomUtil.create('button', 'my-button', form); 
button.textContent = 'Ok!'; 

var buttonHTML = button.outerHTML; 

var form = '<form class="my-form">' + inputHTML + buttonHTML + '</form>'; 

http://plnkr.co/edit/Z6rADJ?p=preview

这就是说（和阅读您的评论之后），我必须说：这工作，但非常哈克。我不会推荐这样做这样的事情。您可以使用HTML元素构建表单或使用模板/字符串并将其转换为HTML元素，以便您可以附加处理程序和处理内容。混合起来会让你陷入困境。我想接近它是这样的：

模板：

var template = '<form id="popup-form">\ 
    <label for="input-speed">New speed:</label>\ 
    <input id="input-speed" class="popup-input" type="number" />\ 
    <table class="popup-table">\ 
    <tr class="popup-table-row">\ 
     <th class="popup-table-header">Arc numer:</th>\ 
     <td id="value-arc" class="popup-table-data"></td>\ 
    </tr>\ 
    <tr class="popup-table-row">\ 
     <th class="popup-table-header">Current speed:</th>\ 
     <td id="value-speed" class="popup-table-data"></td>\ 
    </tr>\ 
    </table>\ 
    <button id="button-submit" type="button">Save Changes</button>\ 
</form>'; 

使用样式表，保持模板非常干净：

.popup-table { 
    width: 100%; 
} 

.popup-table-row { 
    background-color: grey; 
} 

在onEachFeature功能，附加一个单击处理程序：

L.geoJson(collection, { 
    onEachFeature: function (feature, layer) { 
    layer.on('click', layerClickHandler); 
    } 
}); 

并处理它：

function layerClickHandler (e) { 

    var marker = e.target, 
     properties = e.target.feature.properties; 

    // Check if a popup was previously set if so, unbind 
    if (marker.hasOwnProperty('_popup')) { 
    marker.unbindPopup(); 
    } 

    // Create new popup from template and open it 
    marker.bindPopup(template); 
    marker.openPopup(); 

    // Now that the popup is open and the template converted to HTML and 
    // attached to the DOM you can query for elements by their ID 

    L.DomUtil.get('value-arc').textContent = properties.arc; 
    L.DomUtil.get('value-speed').textContent = properties.speed; 

    var inputSpeed = L.DomUtil.get('input-speed'); 
    inputSpeed.value = properties.speed; 
    L.DomEvent.addListener(inputSpeed, 'change', function (e) { 
    properties.speed = e.target.value; 
    }); 

    var buttonSubmit = L.DomUtil.get('button-submit'); 
    L.DomEvent.addListener(buttonSubmit, 'click', function (e) { 
    // Do fancy ajax stuff then close popup 
    marker.closePopup(); 
    }); 

} 

实施例上Plunker：http://plnkr.co/edit/8qVoW5?p=preview

这是清洁器，更快速，它不结合弹出窗口每标记。它更具可读性，可扩展性并且不易出错。我希望有所帮助，祝你好运！