Всплывающее окно с несколькими полями - PullRequest
Новая
       9

Всплывающее окно с несколькими полями

0 голосов
/ 09 мая 2018

Я пытаюсь показать всплывающие окна на маркерах, которые читаются из таблицы SQL.Мне удалось прочитать одно поле, но мне нужно, чтобы оно прочитало более одного поля (first_name, Family_name, Health_con ... и т. Д.). 

        for (var i = 0; i < data.length; i++ )  {
            caseData.push ({
                id: data[i].id, 
                first_name: data[i].first_name,
                family_name: data[i].family_name,   
                health_con: data[i].health_con,
                nin: data[i].nin,
                notes: data[i].notes,
                lat: data[i].lat, 
                lon: data[i].lon
            }); 
        }
        plotCases()
    })

    event.preventDefault();
});
});

function plotCases()    {

 // Loop through caseData to create marker at each location 
   for (var i = 0; i < caseData.length; i++)    { 
    var markerLocation = new L.LatLng(caseData[i].lat, caseData[i].lon);
    var marker = new L.Marker(markerLocation);
    mymap.addLayer(marker);
    marker.bindPopup(caseData[i].health_con); }}  <<< here

Я пытаюсь показатьболее одного поля во всплывающем информационном окне.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018 
var popup = L.popup({className: 'if-you-need-a-class'})
.setContent('<div class="if-you-need-div">'+
'<h3>' + caseData[i].health_con + '</\h3>'+
'<p><b>' + caseData[i].notes + '</b><br>'+
'<b>' + caseData[i].family_name + '</b><br>'+
'</\p>'+
'</\div>');

var markerLocation = new L.LatLng(caseData[i].lat, caseData[i].lon);
var marker = new L.Marker(markerLocation).bindPopup(popup);

mymap.addLayer(marker);

Должен работать как положено. Для наглядности я использую несколько строк, но вы можете поместить все в одну строку следующим образом: 

var popup = L.popup({className: 'if-you-need-a-class'})
.setContent('<div class="if-you-need-div"><h3>' + caseData[i].health_con + '</\h3>[...]</\div>');

L.popup даст вам больше настроек, если вам нужно добавить имя класса, но вы все еще можете использовать marker.bindPopup(your-string-here);

0 голосов
/ 10 мая 2018

Добро пожаловать в SO!

Вы, кажется, также плохо знакомы с JavaScript и, возможно, программируете в целом.

Leaflet bindPopup метод принимает строку в качестве аргумента.Вам необходимо объединить строковые значения ваших "полей": см. Раздел "Объединение строк" руководства MDN по работе со строками: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings Вкратце: используйте оператор + str1 + str2

Вас также может заинтересовать этот пост в ГИС StackExchange: https://gis.stackexchange.com/questions/169976/how-to-iterate-through-the-attributes-of-a-feature-in-leaflet

...