問題描述
當我嘗試在 Leaflet 彈出窗口中添加按鈕時遇到問題.單擊地圖時會生成彈出窗口.
I got a problem when I try to add buttons inside a Leaflet popup. The popup is generated when you click on the map.
理想情況下，我想彈出 2 個按鈕:
Ideally I want to popuo to show 2 buttons:
- 從這里開始
- 然后去這個位置
這個草圖是我想要的結果的一個例子:
This sketch is an example of the result I want:
________________________________________________
|You clicked the map at LatLng(XXXXX,XXXXX) |
| --------------- ------------------- |
| |Start from here| |Go to this location| |
| --------------- ------------------- |
|___________________ ___________________________|
/
這是我在彈出窗口中看到的內容:您在 LatLng(XXXXX,XXXX) [object HTMLButtonElement] 處單擊了地圖
this is what I get inside my popUp : You clicked the map at LatLng(XXXXX,XXXX) [object HTMLButtonElement]
我正在嘗試使用 L.domUtil 創建按鈕
I am trying to create the buttons using 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;
}
我從這里調用我的方法:
I call my method from here :
this.map.on('click', (e: any) => {
this.defineYourWaypointOnClick(e);
});
提前感謝您能給我的任何幫助:)
Thank you in advance for any help you can give me :)
推薦答案
您應該使用 innerHTML 向您的傳單添加按鈕，如下所示
You should be using innerHTML to add buttons to your leaflet as below
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;
}
這篇關于在 Leaflet 彈出窗口中添加按鈕的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！