リーフレット：popup.setContent（）を使用してポップアップイメージを変更する

Question

ポップアップでイメージを定期的に変更しようとしています。関数refreshImageは、サーバーからの画像データの64バイトの文字列を定期的にGETに設定し、popup.setContent()を使用してimgのsrcを設定します。 2番目の部分では、jsonファイルからコーディネーションデータを取得し、マーカを作成し、ポップアップをバインドし、refreshImage関数をトリガするonClickイベントハンドラを開始します。データを取得するためのマーカーの作成からすべてが適切に機能し、単純なHTML状況で使用されると、データは画像として表示されます。しかし、ポップアップでイメージを表示したり、更新したりすることはできません。私はpopup.setContent()、$(popup._contentNode).html()、document.getElementById(imageID).src =およびdocument.getElementById(imageID).innerHTML=""を試しましたが、どれもうまくいかないようです。ここに私のコードです：popupopenとpopupclose

このイベントは、イベントコールバックに現在のポップアップオブジェクトを提供します。

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

それを達成するために、あなたはmarkerが提供する他のイベントを使用する必要があります。ここで

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()); 
} 

は、私は継続的マーカーがクリックされたポップアップで時刻を更新exampleです。

注： ポップアップは、マーカーではなくマップに属するレイヤーです。したがって、あなたはクリックイベントを使用することはできません。