javascript - leaflet:使用 popup.setContent() 更改弹出图像

Question

我正在尝试使弹出窗口中的图像定期更改。函数refreshImage定期GET从服务器获取基于 64 位的图像数据字符串，并使用 popup.setContent() 设置 img 的 src 。第二部分从 json 文件获取坐标数据并创建标记、绑定(bind)弹出窗口并启动将触发刷新图像函数的 onClick 事件处理程序。从创建标记到获取数据的一切工作正常，如果在简单的 HTML 情况下使用，数据可以显示为图像。但它只是无法在弹出窗口中显示和刷新图像。我已经尝试过popup.setContent() , $(popup._contentNode).html() , document.getElementById(imageID).src =和document.getElementById(imageID).innerHTML="" ，但似乎都不起作用。这是我的代码:

    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 提供的其他事件:popupopen和popupclose

此事件向事件回调提供当前弹出对象。

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当单击标记时，我会不断更新弹出窗口中的时间。

注意: 弹出窗口是属于 map 而不是标记的图层。所以你不能像你那样使用点击事件。