Hinzufügen von Schaltflächen innerhalb des Leaflet-Popup-Fensters

Question

Ich habe ein Problem, wenn ich versuche, Schaltflächen in einem Leaflet-Popup hinzuzufügen. Das Popup wird generiert, wenn Sie auf die Karte klicken.

Im Idealfall möchte ich 2 Tasten zeigen popuo:

• Start von hier
• und gehen Sie zu diesem Standort

Diese Skizze ist ein Beispiel für das Ergebnis, das ich will:

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

das ist, was ich in meinem PopUp bekomme: Sie klickten die Karte bei LatLng (XXXXX, XXXX) [Objekt HTMLButtonElement]

Ich versuche, die Tasten von hier mit 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; 
} 

Ich nenne meine Methode zu erstellen:

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

Vielen Dank im Voraus für jede Hilfe Sie mir geben können:)

Answer 1

Sie sollten innerHTML- werden mit den Tasten auf Ihrem Merkzettel hinzufügen, wie unten

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