Question

我有一种情况，我必须重复更新图像上的标记，即每秒。我正在从我的服务器获取最新的坐标。

我正在做的是在$(document).ready(function () { });函数下调用php文件并获取最新的坐标。稍后在ajax的complete:上将标记放在图像上（使用函数）。放完标记后，再次调用调用php的ajax function并获取新的坐标。

这部分很好，我每秒钟都会获得最新的合作，但是当我尝试再次绘制标记时，它就不会更新。如果我刷新页面，它就可以工作。

使用img viewer。

可能导致问题的代码段是：

function reload_coord() {
            var default_notes = [   {x: convx1, y:convy1, note:"User 1"}, 
            {x: ".5", y:".5", note: 'User 2'}];
            var $imgf = $("#image_fixed").imgNotes();
            $imgf.imgNotes("import", default_notes);
            var $imgd = $("#image_dynamic").imgNotes({
                onReady: function() {
                    this.import(default_notes);
                }
            });

        }

我相信它正在发生，因为img的onReady函数，即在我刷新页面后它会被加载，但在那之后，它不会进入onReady。

任何人都可以告诉我我该怎么做才能在不刷新整个页面的情况下一次又一次刷新标记。

由于

Answer 1

我们的想法是扩展imgViewer2插件以实现您想要的效果。这是一个带有移动标记的简单扩展：

<script type="text/javascript">
;(function($) {
    $.widget("wgm.imgDynMarker", $.wgm.imgViewer2, {
/*
*   Add the marker
*/
        addMarker: function( x, y, note ) {
            var map = this.map,
                loc = this.relposToLatLng( x, y );
            this.mkr = L.marker(loc).addTo(map).bindPopup(note);
        },
/*
*   Move the marker
*/
        moveMarker: function(x,y) {
            var loc = this.relposToLatLng( x, y );
            this.mkr.setLatLng(loc);
        }
    });
    $(window).on("load", function() {
        var $img = $("#image1").imgDynMarker();
        $img.imgDynMarker('addMarker', 0.5, 0.5, "A note");
        setInterval( function() {
            var x = Math.random();
            var y = Math.random();
            $img.imgDynMarker('moveMarker', x, y );
            $img.imgDynMarker('panTo', x, y );
        }, 1000 );
    });
})(jQuery);

Answer 2

是的，AJAX事件不会调用onready触发器。您可以在完整的AJAX活动中调用它，但这可能会让您的页面变得笨拙，只有少数访问者。

$( document ).ajaxComplete(function() {
 reload_coord() ;
});

最好每隔一秒左右设置一次AJAX调用。

$( document ).ajaxComplete(function() {
 setTimeout(setTimeout(reload_coord() ), 1500);
});

一次又一次重新加载img onReady函数

2 个答案: