Question

我在网上搜索了所有内容，但我无法理解这一点。

问题在于：

我正在使用jquery-ui-map网站的以下演示来加载JSON文件：

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html

它可以正常加载我的标记，但我需要每30秒刷新一次内容并获取新标记。

起初我以为我会再次调用该函数，但是那里留下了标记。经过一些研究，我发现我需要清除标记（在V3上不是那么容易，但我能够做到），但问题是我无法再显示标记。

如果我使用destroy函数，那么我可以重新加载新标记并删除旧标记，但这会导致地图闪烁。当我尝试清除标记时，没有显示新的标记。

非常感谢任何帮助。

以下是我的代码：

<script type="text/javascript">
    function mapTest() { 
        $('#map_canvas').gmap('destroy');
        //clearMap();
        demo.add(function() {
            $('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
                var self = this;
                $.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) { 
                    $.each( data.markers, function(i, marker) {
                        self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                            self.openInfoWindow({ 'content': marker.content }, this);
                        });
                    });
                });
            }}); 
        }).load();
    }

    function clearMap(){
        $('#map_canvas').gmap('clear', 'markers');
    }           

    mapTest();
    setInterval(mapTest, 30000 );
</script>

干杯。

Answer 1

您的地图初始化功能位于mapTest()功能中 - 您使用setInterval每隔30秒再次调用该功能。

这是错误的，因为你基本上重新加载地图（你destroy然后每隔30秒重新创建一次），这就是为什么它会闪烁。

将地图初始化置于mapTest()之外，但clear并从mapTest()

中检索新标记

<强>更新

var mapOptions = {
    disableDefaultUI: true
    // add more options if you wish.
};

function mapTest() {

    $('#map_canvas').gmap('clear', 'markers'); // clear old markers
    $.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) { 
        $.each( data.markers, function(i, marker) {
            var self = this;
            self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                self.openInfoWindow({ 'content': marker.content }, this);
            });
        });
    });
}


$(function(){
    $('#map_canvas').gmap(mapOptions, function(){

        $.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) { 
            $.each( data.markers, function(i, marker) {
                var self = this;
                self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                    self.openInfoWindow({ 'content': marker.content }, this);
                });
            });
        });
    });

    setInterval(mapTest, 30000 );

});

Answer 2

我找到了一个解决方案来更新标记而无需重新加载地图。试试这段代码......

$(document).ready(function() {
    var $map = $('#map_canvas');
    App.drawMap($map);
    setInterval(function() {

    $('#map_canvas').gmap('clear', 'markers');
       App.drawMap($map);
    },10000);


});



var App = {
    drawMap: function($divMap) {
        Http.doAjaxGetJson('../../js/testjson.json', function(data) {
            for (var k in data.gpsData) {
                $divMap.gmap({ 'center': new google.maps.LatLng(data.gpsData[k].latitude,data.gpsData[k].longitude),'zoom':15, 'callback': function() {}});
                $divMap.gmap('addMarker', {
                    'title':data.obj.name,
                    'position': new google.maps.LatLng(data.gpsData[k].latitude, data.gpsData[k].longitude),
                    'bounds': false,
                }).click(function() {
                     var $_obj = $(this);
                });



        }
    });
}
};

通过此代码标记将每10秒更新一次..

jquery-ui-map加载json并更新标记

2 个答案: