我一直在创建一个新的 Leaflet 自定义控件

Question

我\xc2\xb4已经阅读了Leaflet文档和一些在线教程，但对我来说没有任何作用。

\n

我\xc2\xb4m 希望在传单缩放控件（左上）下添加一个新的单个按钮，但\xc2\xb4t 找不到添加它的方法。

\n

我\xc2\xb4ve尝试过这样的事情：

\n

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

\n

按钮功能是显示我\xc2\xb4ve从API获取的一些数据（我几乎已经准备好该功能）。

\n

请有人帮助我，我将非常感激！

\n

Answer 1

你走在正确的道路上。将leaflet控件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);