Как добавить несколько пользовательских кнопок управления буклета js?

Question

Я нашел код, чтобы добавить одну кнопку на карте впадения в верхний угол. Но теперь я хочу добавить несколько кнопок один за другим.

1. Возможно ли вставить несколько кнопок в следующий код?

2. Я также попытался использовать флажок/переключатели. Но я не знаю, как добавить ярлыки к флажку и кнопке.

3. И добавить к ним проверенные/непроверенные свойства.

Спасибо.

Мой код здесь:

var customControl = L.Control.extend({ options: {position: 'topleft'},onAdd: function (map) { 
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); 

onAdd: function (map) { 
    var container = L.DomUtil.create('input','my-button btn'); 
    container.type="button"; 
    container.title="x"; 
    container.value = "x"; 
    container.label = "x"; 

    container.style.backgroundColor = 'white';  

    container.style.backgroundSize = "30px 30px"; 
    container.style.width = '40px'; 
    container.style.height = '40px'; 
    container.style.borderRadius = "25px"; 
    container.style.padding = "0"; 
    container.style.margin = "10px"; 

container.onclick = function(){ 
    console.log('buttonClicked'); 
} 

return container;}}); 

Answer 1

Вы можете создать столько листовка «управления», как вы хотите. Вы можете вставлять их в любой угол, и они просто «складываются» (с краем 10 пикселей, если я правильно помню) в вертикальном столбце в данном углу.

Что касается содержания каждого элемента управления, это просто HTML и CSS. В вашем коде вы используете утилиту Leaflet L.DomUtil.create(), но вы могли бы просто использовать собственный document.createElement() (но придется добавлять класс в отдельную строку) или даже утилиту jQuery DOM (с помощью которой вы можете напрямую писать строку HTML).

Затем вы можете создавать сложный контент (с входами, связанными метками и т. Д.). Просто найдите HTML-учебники/JavaScript, которые создают узлы DOM.