Comment insérer un nouveau texte de ligne dans une popup

9

J'utilise Leaflet Marker Cluster et j'ai besoin d'afficher cinq lignes différentes dans une fenêtre contextuelle. Mais quand j'écris ceci, ils sont tous dans la même ligne. Quelqu'un peut-il m'aider à être l'un sous l'autre?

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);
contre-courant
la source

Réponses:

17

Comme l'indique la documentation Leaflet , Marker#bindPopupprend une chaîne HTML comme premier paramètre.

Si vous souhaitez que vos lignes apparaissent sur des lignes différentes, vous devez ajouter le balisage HTML approprié. Dans votre cas, une liste de définitions semble la plus pertinente.

Par conséquent:

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

marker.bindPopup(list);
MattiSG
la source