Mapbox GLポップアップ.setDOMContentの例

Question

私は、ダイナミックリンク（URL）を生成するポップアップに表示されるカスタマイズされたボタンを作成しようとしています。私はタイミングのために.setHTMLを介してこれを行うことができないようですが、実行時にボタンを関数にバインドすることはできません。だから私は新しい設定を試みると思った.setDOMContent この機能の仕組みについては、オンラインの情報はありません。私は、誰かが、関数を実行してデータを送ることができるポップアップにボタンが追加されている場所の例があるのだろうかと思います。

これを設定するのは非常に貧弱な試みです。

この関数はポップアップ

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); 
}; 

を作成し、この関数は、この関数は.setDOMContent

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

を経由してDOMのコンテンツを追加したい.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; 
} 

経由でHTMLを追加します

私は、features.geometry.coordinatesの変数をfunctにパイプしていますイオンAddGameObjectToInventory（）

オブジェクトをクリックしたときに、私は取得していますエラー（そのポップアップとして生成されている）

Uncaught TypeError: Cannot read property 'addEventListener' of null 

Answer 1

Popup#setHTMLは、いくつかのHTMLコンテンツを表す文字列を取ります。

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

、Popup#setDOMContentは実際のHTMLノードを使用します。すなわち

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

これらのコードスニペットの両方が同一のポップアップHTMLコンテンツになります。単一のポップアップで両方のメソッドを使用したくないのは、同じことを行う2つの異なる方法であるからです。

共有コードでの問題は、あなたがボタンにイベントリスナーを追加するためにsetDOMContentを使用しようとしているということですが、あなたがポップアップDOMいったんイベントリスナーを追加するPopupオブジェクトにアクセスする必要はありません。コンテンツがマップに追加されました。ここにあなたがしようとしていると思っているものの作業バージョンがあります：https://jsfiddle.net/h4j554sk/