Broschüre: Popup-Bild mit popup.setContent() ändern

Question

Ich versuche, Bilder in Popups regelmäßig zu ändern. Die Funktion refreshImage verwendet in regelmäßigen Abständen GET vom Server eine 64-basierte Zeichenkette von Bilddaten und legt den Quellcode des img unter Verwendung von popup.setContent() fest. Der zweite Teil übernimmt die Koordinationsdaten aus einer json-Datei und erstellt Marker, bindet Popups und initiiert einen onClick-Event-Handler, der die refreshImage-Funktion auslöst. Alles von create marker, um Daten richtig zu bekommen, können die Daten als Bild angezeigt werden, wenn sie in einer einfachen HTML-Situation verwendet werden. Aber es kann das Bild in einem Popup einfach nicht anzeigen und aktualisieren. Ich habe versucht popup.setContent(), $(popup._contentNode).html(), document.getElementById(imageID).src = und document.getElementById(imageID).innerHTML="", aber keine scheint zu funktionieren. Hier ist mein Code:

function refreshImage(popup,cName,starttime,endtime,curtime) {//the times are Date object 
     var data; 
     var hour = 60 * 60 * 1000; 
     var nexttime = new Date(curtime.valueOf()+hour); 
     strcurtime = curtime.toLocaleString(); 
     strstarttime = starttime.toLocaleString(); 
     strendtime = endtime.toLocaleString(); 
     strnexttime = nexttime.toLocaleString(); 
     if(endtime<nexttime){ 
      $.get("/images",{camname:cName, starttime: strcurtime,endtime: strendtime}, function(data, status) {// 
      }); 
      curtime = starttime; 
     }else{ 
      $.get("/images",{camname:cName,starttime:strcurtime ,endtime:strnexttime}, function(data, status) {//  
      }); 
      curtime = nexttime; 
     } 

     popup.setContent("<img src=\"data:image/jpeg;base64, "+ data +"\" alt=\"camera_image\" width=\"305\" height=\"210\" border=\"0\" align=\"middle\" id=\"myPic\"><br><p>"+cName+"</p>"); 
     setTimeout(refreshImage,1000,popup,cName,starttime,endtime,curtime); 
    } 


    var markers = []; 
    d3.csv("static/data/cam_coordinates.json", function(error, data) { 
     var cameras = data; 
     var starttime = new Date('2015-12-07 07:00:03'); 
     var endtime = new Date('2015-12-08 08:15:00'); 
     console.log(cameras.length); 
     for(var i = 0; i<cameras.length; ++i){ 
      var marker = L.marker([cameras[i].lat, cameras[i].log], {icon: cam}, {title: cameras[i].camera}).addTo(map); 
      window.markers.push(marker); 
      window.markers[i].bindPopup("<img src=\"\" alt=\"camera_image\" width=\"305\" height=\"210\" border=\"0\" align=\"middle\" id=\"myPic\"><br>"+cameras[i].camera); 

      var popup = window.markers[i]._popup; 

      window.markers[i].on('click', function(popup){ 

       refreshImage(popup,'Ft_Washington_@_179_St', starttime, endtime, starttime); 
      }); 
     } 
    }); 

Answer 1

Um das zu erreichen, haben Sie andere Veranstaltungen von marker zu nutzen: popupopen und popupclose

Diese Ereignisse geben den aktuellen Popup-Objekt an den Ereignisrückruf. Hier

marker1.on('popupopen', function(e) { 
    thePopup = e.popup; // has to be kept global for refreshTime() 
    refreshTime(); // do the first action 
    theTimer = setInterval(refreshTime, 2000); // repeat until we stop it in popupclose 
}); 

marker1.on('popupclose', function(e) { 
    clearInterval(theTimer); 
}); 

function refreshTime() { 
    var d = new Date(); 
    thePopup.setContent(d.toLocaleTimeString()); 
} 

ist ein example, wo ich ständig die Zeit in dem Popup aktualisieren, wenn eine Markierung geklickt wird.

Hinweis: Das Popup ist eine Ebene, die zur Karte gehört, nicht zur Markierung. Daher können Sie das Klickereignis nicht wie Sie verwenden.