So fügen Sie neuen Zeilentext in das Popup ein


9

Ich verwende Leaflet Marker Cluster und muss fünf verschiedene Zeilen in einem Popup anzeigen. Aber wenn ich das schreibe, sind sie alle in der gleichen Zeile. Kann mir jemand helfen, untereinander zu sein?

var a = addressPoints[i];
            var title = a[2];
            var univ = a[3];
            var direct = a[4];
            var city = a[5];
            var state = a[6];
            var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title } );
            marker.bindPopup("Student: " + title + "University: " + univ + "Direction: " + direct + "City: " + city + "State: " + state);
            markers.addLayer(marker);
        }

    map.addLayer(markers);

Antworten:


17

Wie in der Broschürendokumentation angegeben , Marker#bindPopupwird als erster Parameter eine HTML-Zeichenfolge verwendet.

Wenn Ihre Zeilen in verschiedenen Zeilen angezeigt werden sollen, müssen Sie das richtige HTML-Markup hinzufügen. In Ihrem Fall scheint eine Definitionsliste am relevantesten zu sein.

Daher:

var list = "<dl><dt>Student</dt>"
           + "<dd>" + title + "</dd>"
           + "<dt>University</dt>"
           + "<dd>" + univ + "</dd>"
           + 

marker.bindPopup(list);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.