Mapbox GL Popup .setDOMContent Beispiel

Question

Ich versuche eine benutzerdefinierte Schaltfläche zu erstellen, die in einem Popup angezeigt wird, das eine dynamische Verknüpfung (eine URL) generiert. Ich bin nicht in der Lage, dies über die .setHTML-Datei zu tun, da das Timing nicht ausreicht, um eine Schaltfläche zur Laufzeit an eine Funktion zu binden. Also dachte ich, ich würde versuchen, die newish .setDOMContent Es gibt keine Informationen online, wie diese Funktion funktioniert. Ich frage mich, ob jemand ein Beispiel dafür hat, wo eine Schaltfläche zu dem Popup hinzugefügt wird, das eine Funktion ausführen und Daten senden kann.

Hier ist mein sehr schlechter Versuch, dies einzurichten.

Diese Funktion erstellt das Popup

function GameObjectPopup(myObject) { 
    var features = map.queryRenderedFeatures(myObject.point, { 
     layers: ['seed'] 
    }); 

    if (!features.length) { 
     return; 
    } 

    var feature = features[0]; 
    // Populate the popup and set its coordinates 
    // based on the feature found. 
    var popup = new mapboxgl.Popup() 
     .setLngLat(feature.geometry.coordinates) 
     .setHTML(ClickedGameObject(feature)) 
     .setDOMContent(ClickedGameObject2(feature)) 
     .addTo(map); 
}; 

Diese Funktion fügt die HTML über die .setHTML

function ClickedGameObject(feature){ 
    console.log("clicked on button"); 
    var html = ''; 

    html += "<div id='mapboxgl-popup'>"; 
    html += "<h2>" + feature.properties.title + "</h2>"; 
    html += "<p>" + feature.properties.description + "</p>"; 
    html += "<button class='content' id='btn-collectobj' value='Collect'>"; 
    html += "</div>"; 
    return html; 
} 

dieser Funktion wird der DOM-Gehalt über den .setDOMContent

function ClickedGameObject2(feature){ 
    document.getElementById('btn-collectobj').addEventListener('click', function() 
    { 
     console.log("clicked a button"); 
     AddGameObjectToInventory(feature.geometry.coordinates); 
    }); 
} 

hinzufügen möchte

Ich versuche, die Variable von features.geometry.coordinates in die Funktion zu pipen Ion AddGameObjectToInventory()

die Fehler, die ich bekommen habe, wenn auf ein Objekt klicken (so wie Popup erzeugt wird)

Uncaught TypeError: Cannot read property 'addEventListener' of null 

Answer 1

Popup#setHTML nimmt einen String, der einige HTML-Inhalte darstellt:

var str = "<h1>Hello, World!</h1>" 
popup.setHTML(str); 

während Popup#setDOMContent tatsächlichen HTML-Knoten übernimmt. d. h .:

var h1 = document.createElement('h1'); 
h1.innerHTML="Hello, World"; 
popup.setDOMContent(h1); 

beide Code-Snippets würden identische Popup-HTML-Inhalte ergeben. Sie möchten nicht beide Methoden für ein einzelnes Popup verwenden, da es sich um zwei verschiedene Möglichkeiten handelt, dasselbe zu tun.

Das Problem in dem Code, den Sie geteilt ist, dass Sie die setDOMContent zu verwenden sind versucht, ein Ereignis-Listener auf Ihre Schaltfläche hinzufügen, aber Sie brauchen nicht auf die Popup Objekt zuzugreifen, den Ereignis-Listener, sobald das Popup-DOM hinzufügen Inhalt wurde der Karte hinzugefügt. Hier ist eine funktionierende Version von dem, was ich denke, Sie versuchen zu tun: https://jsfiddle.net/h4j554sk/