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

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

— 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