Mapbox GL Popup .setDOMContent示例 [英] Mapbox GL Popup .setDOMContent example

问题描述

我正在尝试创建一个自定义按钮，使其出现在弹出窗口中，该弹出窗口会生成动态链接(URL).由于时间原因，我似乎无法通过.setHTML执行此操作，无法在运行时将按钮绑定到函数.所以我想我会尝试新的.setDOMContent 关于此功能的工作原理，在线信息为零.我想知道是否有人有一个示例，其中将一个按钮添加到弹出窗口中，该按钮可以运行函数并发送数据.

I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.

这是我进行设置的非常糟糕的尝试.

Here's my very poor attempt at setting this up.

此功能创建弹出窗口

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

This function adds the html via the .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;
}

此函数希望通过.setDOMContent添加DOM内容

This function wants to add the DOM content via the .setDOMContent

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

我正在尝试将来自features.geometry.coordinates的变量传递给函数AddGameObjectToInventory()

I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()

单击对象时出现的错误(正在生成弹出窗口)

the error I'm getting when clicking on an object (so as popup is being generated)

Uncaught TypeError: Cannot read property 'addEventListener' of null

推荐答案

Popup#setHTML 采用表示某些HTML内容的字符串:

Popup#setHTML takes a string that represents some HTML content:

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

，而 Popup#setDOMContent 需要实际的HTML节点.即:

while Popup#setDOMContent takes actual HTML nodes. i.e:

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

这些代码片段中的

都将导致相同的Popup HTML内容.您不希望在单个弹出窗口上同时使用这两种方法，因为它们是做同一件事的两种不同方式.

both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.

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

The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/

这篇关于Mapbox GL Popup .setDOMContent示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！