MapBox html 标记

Question

我有一个 html 标记，我想在里面有一个按钮，来删除这个标记

const PoiHtml = (poi: PointOfInterest) =>
        `<h3>${poi.name}</h3>
        <button>delete</button>`

const source = map.getSource(`marker-${poi.id}`) as any;
source.setData({
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'properties': {
                        'description': PoiHtml(poi),
                        'icon': 'theatre'
                    }
                }
            ]
        });

如何获取点击删除按钮的事件？

Answer 1

有不同的方法可以实现此目的，但最简单的方法可能是使用 HTML

onclick

事件。您只需修改字符串即可添加带有事件处理程序值的

PoiHtml

属性。我创建了一个关于

如何将事件添加到标记弹出窗口

的快速小提琴。每次单击按钮时，控制台都会通过事件记录onclick

相关代码如下：

"deleted"