Hinzufügen von Nur-Text-Beschriftungen auf der Leaflet-Karte ohne Symbol

22

Ich suche nach einer Möglichkeit, Text auf der Leaflet-Karte mit Markierungen oder anderen Elementen anzuzeigen, ohne ein Symbol anzuzeigen. Ich möchte nur Text anzeigen und in der Lage sein, ihn zu stylen und zu drehen ... Irgendwelche Vorschläge?

leaflet Etienne Desgagné
quelle
1
@NikhilVJ - In diesen Fragen und Antworten wird nicht erläutert, wie ein Tooltip ohne einen entsprechenden Marker erstellt werden kann. Die Antworten hier diskutieren , wie zu haben , nur den Text, ohne sichtbare Markierung.
ToolmakerSteve
Ah, tut mir leid, mein Schlimmes
Nikhil VJ

Antworten:

19

Ich habe mein Problem mit der Leaflet L.DivIcon-Funktion gelöst, die ein leichtes Symbol für Markierungen darstellt, bei dem ein einfaches div-Element anstelle eines Bilds verwendet wird. Diese Markierungen haben eine HTML- und eine className-Option, mit der ich Etiketten mit CSS-Laufwerk erstellen kann Stile ...

Etienne Desgagné
quelle
11
Würde es Ihnen etwas ausmachen, ein bisschen Code dafür bereitzustellen?
Mastov
Diese Antwort ist keine Ahnung, ob Sie ein Label und einen Marker wollen
Roy
@ Roy - das ist eine andere Situation; Siehe L.Tooltip . Wenn die Bezeichnung (die QuickInfo) immer angezeigt werden soll, setzen Sie die Option permanent auf true.
ToolmakerSteve
16

Update für Leaflet 1.0: Ab Leaflet 1.0 ist das Leaflet.label-Plugin veraltet, da es im Leaflet-Core als enthalten ist L.Tooltip. Es ist nicht erforderlich, das Quellenskript einzuschließen, und die Syntax hat sich geringfügig geändert. Beispielnutzung:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

CSS-Stil kann auf die gleiche Weise wie zuvor auf die Klasse angewendet werden.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

Es scheint auch, dass die Markierungsopazität vollständig auf 0 gesetzt werden kann.

Vor Leaflet 1.0: Verwenden Sie das Leaflet.label-Plugin (bereits von geomajor56 erwähnt).

<script src="scripts/leaflet.label.js"></script>

Mit dem Leaflet Label-Plugin werden Beschriftungen direkt mit Markierungen verknüpft. Sie können jedoch die Deckkraft der Markierung auf nahezu Null setzen, sodass nur die Beschriftung sichtbar ist. (Wenn Sie die Deckkraft des Markers auf 0 setzen, wird die zugehörige Bezeichnung ebenfalls ausgeblendet.)

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Sie können dann CSS verwenden, um Ihre Etiketten nach Ihren Wünschen zu gestalten:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}
James Lawruk
quelle
<script src = "scripts / leaflet.label.js"> </ script> - Nachdem ich diese Zeile zu meinem HTML hinzugefügt habe, schien die Seite leer zu sein. Muss ich irgendwelche Dateien herunterladen?
Marcin Kosiński
@ MarcinKosiński - Ja, Sie müssen leaflet.label.js vom GitHub-Link im Beitrag herunterladen und in einen Unterordner Ihrer Website mit dem Namen scripts kopieren. Alternativ können Sie die URL im Code durch die gehostete Datei unter leaflet.github.io/Leaflet.label/leaflet.label.js ersetzen (möglicherweise möchten Sie auch die CSS-Datei; gleicher Name und Speicherort, unterschiedliche Erweiterung).
KeithS
Ich habe versucht, dies zu tun. Irgendeine Idee, wie man den Hintergrund und den Rand entfernt? snag.gy/JdnpyV.jpg
WantIt
Bei Verwendung von L.Tooltipinside onEachFeature wird folgender Fehler angezeigt: "Uncaught TypeError: 'appendChild' konnte auf 'Node' nicht ausgeführt werden: Parameter 1 ist nicht vom Typ 'Node'."
Nikhil VJ
Gelöst, ich habe eine der Feature-Eigenschaften als Text verwendet, musste .toString()am Ende eine anhängen . marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Nikhil VJ
4

Sie können hier mit diesem Leaflet-Plugin beginnen . Erstellen oder bearbeiten Sie wahrscheinlich einen Marker nach Ihren Wünschen. Kommt der Text von Feature-Attributen?

geomajor56
quelle
Dies beantwortet eine andere Frage als gestellt wurde. So fügen Sie einer vorhandenen Markierung eine Beschriftung hinzu . Es ist keine Erklärung, wie man nur ein Etikett hat - kein Markierungssymbol.
ToolmakerSteve
0 
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

Das funktioniert bei mir

Sathish Kumar Arunachalam
quelle
Dies beantwortet eine andere Frage als gestellt wurde. So fügen Sie einer vorhandenen Markierung eine Beschriftung hinzu . Es ist keine Erklärung, wie man nur ein Etikett hat - kein Markierungssymbol.
ToolmakerSteve