Mapbox GL Popup.setDOMContent示例
我正在尝试创建一个自定义按钮,以显示在一个弹出窗口中,该弹出窗口生成一个动态链接(URL)。由于时间原因,我似乎无法通过.setHTML实现这一点,无法在运行时将按钮绑定到函数。所以我想我应该试试新的 关于这个功能是如何工作的,网上没有任何信息。我想知道是否有人有这样一个例子,在弹出窗口中添加一个按钮,可以运行一个函数并发送数据 这是我设置这个的非常糟糕的尝试 此函数用于创建弹出窗口Mapbox GL Popup.setDOMContent示例,dom,mapbox-gl,mapbox-gl-js,Dom,Mapbox Gl,Mapbox Gl Js,我正在尝试创建一个自定义按钮,以显示在一个弹出窗口中,该弹出窗口生成一个动态链接(URL)。由于时间原因,我似乎无法通过.setHTML实现这一点,无法在运行时将按钮绑定到函数。所以我想我应该试试新的 关于这个功能是如何工作的,网上没有任何信息。我想知道是否有人有这样一个例子,在弹出窗口中添加一个按钮,可以运行一个函数并发送数据 这是我设置这个的非常糟糕的尝试 此函数用于创建弹出窗口 function GameObjectPopup(myObject) { var features =
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;
}
我正在尝试将features.geometry.coordinates中的变量导入函数AddGameObjectToInventory()
单击对象时出现的错误(生成弹出窗口)
获取表示某些HTML内容的字符串:
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
这两个代码片段都会产生相同的弹出式HTML内容。您不希望在一个弹出窗口上同时使用这两种方法,因为它们是两种不同的方法来完成相同的事情
您共享的代码中存在的问题是,您试图使用setDOMContent
向按钮添加事件侦听器,但在将弹出DOM内容添加到映射后,您不需要访问Popup
对象来添加事件侦听器。以下是我认为您正在尝试的工作版本:
Uncaught TypeError: Cannot read property 'addEventListener' of null
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);