DOMANDA [JavaScript/HTML] Aiuto per popup mappa leaflet

[Gianlucass01]

Salve ho creato una mappa con leaflet su cui ci sono posizionati dei markers (con latitudine e longitudine presi da un database con ajax), su questa mappa ci sono delle stazioni (devo fare una sorta di bike sharing) e vorrei fare che nel popup del markers ci sia un bottone che mi fa visualizzare la foto di quella stazione.. la foto avevo pensato di inserirla come campo nel database (magari come stringa e inserisco il percorso della foto), visto che per piazzare i markers uso una chiamata ajax che poi passa tutti i campi della tabella al mio codice javascript... il bottone (html) lo riesco a mettere all'interno del popup (in .setContent) però poi non so come proseguire.. ho provato a mettere in "onclick" una funzione che prende come parametro i campi della tabella delle stazioni che avevo ottenuto con ajax ma poi non so come proseguire.. cioè sono riuscito a far uscire un alert ma se clicco sul bottone mi escono gli alert di tutte le stazioni.. e io vorrei che premendo il bottone di una stazione mi esca solo la foto di quella stazione, vi faccio vedere i codici

function LeggiMarkersStazioni(){
                var xmlhttp = new XMLHttpRequest();
              
                xmlhttp.onreadystatechange = function() {
                      
                    if (xmlhttp.readyState == 4)
                        if(xmlhttp.status == 200)
                            mettiMarkersStazioni(xmlhttp.responseText);
                }
                  
                xmlhttp.open("GET","scriptStazione.php", true);
                xmlhttp.send();
            }
          

            function mettiMarkersStazioni(testo) {
                    var i;
                                      
                    markers1 = new Array(0);
                    popups1 = new Array(0);  
                  
                    elencoStazioni = JSON.parse(testo);
                  
                    for(i = 0; i < elencoStazioni[i].length; i++) {
                        markers1[markers1.length] = L.marker([elencoStazioni[i].Latitudine, elencoStazioni[i].Longitudine], {icon: redIcon}).addTo(mymap);
                        popups1[popups1.length] = new L.Popup();
                        var latlng = new L.LatLng ( parseFloat(elencoStazioni[i].Latitudine) , parseFloat(elencoStazioni[i].Longitudine));           
                        popups1[popups1.length-1].setLatLng(latlng);
                        popups1[popups1.length-1].setContent(elencoStazioni[i].NomeStazione + "<br>" + elencoStazioni[i].Indirizzo + "<br>" + "Slot liberi: " + elencoStazioni[i].SlotLiberi + "<br><br>" + "<button id= 'button' name='foto' onclick='MostraFoto(elencoStazioni)'>Visualizza la foto</button>");
                        markers1[markers1.length-1].bindPopup(popups1[popups1.length-1],{autoPan: false});                   
                        mymap.addLayer(popups1[popups1.length-1]);                       
                    }

--- i due messaggi sono stati uniti ---
Nessuno mi può aiutare? :(

 

[AntonioRagagnin]

Ciao, provo a riassumere il problema, dimmi se ho capito bene:
- in mettiMarkersStazioni ricevi elencoStazioni che contiene appunto una lista di stazioni;
- per ogni stazione prepari il popup e con setContent vuoi mettere l'HTML di un pulsante;
- al momento questo pulsante è <button id= 'button' name='foto' onclick='MostraFoto(elencoStazioni)'>.
- il tuo problema è che MostraFoto non riesce a "capire" a quale stazione ti riferisci in particolare.

Il motivo è semplice: MostraFoto non riceve l'indice della stazione i.

Purtroppo i esiste solo all' interno del ciclo.
Se ad es. scrivi <button id= 'button' name='foto' onclick='MostraFoto(elencoStazioni,i)'>), al momento del click il browser non avrà idea di cosa sia i !

Soluzione: per ovviare a questo problema scrivi il valore di i nella stringa HTML:
<button id= 'button' name='foto' onclick='MostraFoto(elencoStazioni,"+i+")'>

Ovviamente devi modificare la funzione MostraFoto a e fare in modo che possa ricevere due parametri: elencoStazioni ed i .