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);
Gegenstrom
quelle

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);
MattiSG
quelle