Mapbox GL Popup .setDOMContent 示例答案

【问题标题】：Mapbox GL Popup .setDOMContent exampleMapbox GL Popup .setDOMContent 示例
【发布时间】：2017-02-07 23:25:13
【问题描述】：

我正在尝试创建一个自定义按钮以显示在生成动态链接（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);
};

这个函数通过.setHTML添加html

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

这个函数想要通过 .setDOMContent 添加 DOM 内容

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

我正在尝试将 features.geometry.coordinates 中的变量通过管道传输到函数 AddGameObjectToInventory()

单击对象时出现的错误（因此正在生成弹出窗口）

Uncaught TypeError: Cannot read property 'addEventListener' of null

【问题讨论】：

标签： dom mapbox-gl mapbox-gl-js

【解决方案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);

这两个代码 sn-ps 都会产生相同的 Popup HTML 内容。您不想在单个弹出窗口上使用这两种方法，因为它们是做同一件事的两种不同方法。

您共享的代码中的问题是您尝试使用setDOMContent 向按钮添加事件侦听器，但您无需访问Popup 对象即可添加事件侦听器一次弹出的 DOM 内容已添加到地图中。这是我认为您正在尝试做的工作版本：https://jsfiddle.net/h4j554sk/

【讨论】：