使用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

這是清潔器，更快速，它不結合彈出窗口每標記。它更具可讀性，可擴展性並且不易出錯。我希望有所幫助，祝你好運！