我在创建新的传单自定义控件时遇到了困难

Question

我读过传单文档和一些在线教程，但对我来说什么都不管用。

我想在传单缩放控制下添加一个新的单个按钮(左上角(，但找不到添加它的方法。

我试过这样的东西：

var control = L.Control.Button = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function(map) {
this._map = map;
var container = L.DomUtil.create("div", "leaflet-control-button");
this._container = container;
return this._container;
},
onRemove: function(map) {},

});
control.addTo(map);

按钮功能是显示我从API获得的一些数据(我几乎已经准备好了该功能(。

请有人帮帮我，我会非常感激的！

Answer 1

你走对了。将传单控件css类添加到容器中，因此正确显示leaflet-bar leaflet-control

L.Control.Button = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
var button = L.DomUtil.create('a', 'leaflet-control-button', container);
L.DomEvent.disableClickPropagation(button);
L.DomEvent.on(button, 'click', function(){
console.log('click');
});
container.title = "Title";
return container;
},
onRemove: function(map) {},
});
var control = new L.Control.Button()
control.addTo(map);