Blätterbruafe Custom Control mit aktiven/inaktiven Zuständen für die Durchführung von Aktionen ⇐ HTML

[Guest]

Ich benutze die Broschüre und möchte in der oberen linken Ecke (wie unten gezeigt) eine Schaltfläche mit dem Namen "My Control" bezeichnet, dass beim Klicken Folgendes passiert: < /p>
< ol>
Der Cursor wird zum Fadenkreuz, und die Schaltfläche "Meine Steuerung" ist ein "aktiver" Status. < /li>
Ich kann einmal überall auf der Karte klicken. Wenn ein ich auf die Karte klicke, wird eine Aktion durchgeführt (z. B. Druck in die Konsole der Lat-Lon-Koordinaten dessen, wo der Benutzer geklickt hat). Meine Steuerung "Schaltfläche" Inaktiv "geht in einen" inaktiven "Zustand zurück, und der Cursor ist kein Fadenkreuz mehr. < /Li>
< /ol>
Wie kann ich so etwas implementieren? /p>
Schließlich kann ich sie implementieren, wenn die Schaltfläche im Status "Active" liegt, so dass das Klicken auf die Schaltfläche wieder zum Status "Inaktiv" zurückkehrt? < /p> < Br />

Code: Select all

var map = L.map('map').setView([48.86, 2.35], 11);

L.Control.MyControl = L.Control.extend({
onAdd: function(map) {
var el = L.DomUtil.create('div', 'leaflet-bar my-control');

el.innerHTML = 'My Control';

return el;
},

onRemove: function(map) {
// Nothing to do here
}
});

L.control.myControl = function(opts) {
return new L.Control.MyControl(opts);
}

L.control.myControl({
position: 'topleft'
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© [url=http://osm.org/copyright]OpenStreetMap[/url] contributors'
}).addTo(map);< /code>
.my-control {
background: #fff;
padding: 5px;
}< /code>