在 Leaflet 弹出窗口中添加按钮

Question

当我尝试在 Leaflet 弹出窗口中添加按钮时遇到问题。单击地图时会生成弹出窗口。

理想情况下，我想弹出 2 个按钮：

• 从这里开始
• 然后去这个位置

这个草图是我想要的结果的一个例子：

 ________________________________________________
|You clicked the map at LatLng(XXXXX,XXXXX)      |
|  ---------------    -------------------        |
| |Start from here|  |Go to this location|       |
|  ---------------    -------------------        |
|___________________  ___________________________|
                   \/

这是我在弹出窗口中看到的内容：您在 LatLng(XXXXX,XXXX) [object HTMLButtonElement] 处单击了地图

我正在尝试使用 L.domUtil 创建按钮

defineYourWaypointOnClick(e: any) {

var choicePopUp = L.popup();
var container = L.DomUtil.create('div'),
  startBtn = this.createButton('Start from this location', container),
  destBtn = this.createButton('Go to this location', container);

choicePopUp
  .setLatLng(e.latlng)
  .setContent('You clicked the map at ' + e.latlng.toString() + '<br>' + startBtn)
  .openOn(this.map);

L.DomEvent.on(startBtn, 'click', () => {
  alert("toto");
});

L.DomEvent.on(destBtn, 'click', () => {
  alert("tata");
});
}

createButton(label: string, container: any) {
    var btn = L.DomUtil.create('button', '', container);
    btn.setAttribute('type', 'button');
    btn.innerHTML = label;
    return btn;
}

我从这里调用我的方法：

this.map.on('click', (e: any) => {
  this.defineYourWaypointOnClick(e);
});

提前感谢您能给我的任何帮助:)

Answer 1

您应该使用 innerHTML 向您的传单添加按钮，如下所示

defineYourWaypointOnClick(e: any) {

var choicePopUp = L.popup();
var container = L.DomUtil.create('div');
//////////////////////////////////////////////////////////////////////////////////////////////
///////////modified here
startBtn = this.createButton('Start from this location', container),
destBtn = this.createButton('Go to this location', container);
div.innerHTML = ''+startBtn+ '    ' + destBtn ; 
//////////////////////////////////////////////////////////////////////////////////////////////

choicePopUp
  .setLatLng(e.latlng)
  .setContent('You clicked the map at ' + e.latlng.toString() + '<br>' + startBtn)
  .openOn(this.map);

L.DomEvent.on(startBtn, 'click', () => {
  alert("toto");
});

L.DomEvent.on(destBtn, 'click', () => {
  alert("tata");
});
}

createButton(label: string, container: any) {
var btn = L.DomUtil.create('button', '', container);
btn.setAttribute('type', 'button');
btn.innerHTML = label;
return btn;
}