jquery ui映射加载json和更新标记

我已经在网上搜索过了，但是我没有找到答案

问题是：

我正在使用jquery ui映射站点的以下演示加载JSON文件：

它可以很好地加载我的标记，但我需要每30秒刷新它的内容并抓取新的标记

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

如果使用销毁功能，则可以重新加载新标记并删除旧标记，但这会导致地图闪烁。当我尝试清除标记时，不会显示新标记

非常感谢您的帮助

下面是我的代码：

<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>

函数mapTest（）{
$（'map#u canvas'）.gmap（'destroy'）；
//clearMap（）；
demo.add（函数（）{
$（'map_canvas'）.gmap（{'disableDefaultUI'：true，'callback'：function（）{
var self=这个；
$.getJSON（'json/demo.json？'+new Date（）.getTime（），函数（数据）{
$.each（data.markers，function（i，marker）{
self.addMarker（{'position'：new google.maps.LatLng（marker.latitude，marker.longitude），'bounds'：true}）。单击（函数（）{
self.openInfoWindow（{'content'：marker.content}，this）；
});
});
});
}}); 
}).load（）；
}
函数clearMap（）{
$（'map#u canvas'）.gmap（'clear'，'markers'）；
}           
mapTest（）；
设置间隔（mapTest，30000）；

---

干杯。

您的map初始化函数位于

mapTest（）

函数中，您可以使用

setInterval

每隔30秒再次调用该函数

这是错误的，因为您实际上是在重新加载贴图（您

销毁它，然后每隔30秒重新创建一次），这就是它闪烁的原因

将地图初始化放置在
mapTest（）
之外，但
清除
并从
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 );

});

map初始化函数位于
mapTest（）
函数中，您可以使用
setInterval
每隔30秒再次调用该函数

这是错误的，因为您实际上是在重新加载贴图（您
销毁它，然后每隔30秒重新创建一次），这就是它闪烁的原因

将地图初始化放置在
mapTest（）
之外，但
清除
并从
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 );

});

我找到了一个不用重新加载地图就能更新标记的解决方案。请尝试此代码

$(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秒更新一次。
我找到了一个解决方案，可以在不重新加载地图的情况下更新标记。请尝试此代码

$(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秒更新一次。
为什么需要每30秒获取一次新标记？因为标记将更改位置。不仅更改位置，还可以使用不同的标记。它是动态内容，就像当前开放的餐馆一样，如果一家餐馆关闭了，它的标记将从地图上删除，如果另一家餐馆打开了，它将被添加。json来自一个数据库。我已经尝试了一切，甚至Bob的代码，但似乎都不起作用。我一定是在做一些非常愚蠢的事情，因为我认为这是一个非常直截了当的需要。如果有人能帮助我，我将不胜感激。我开始认为最好使用普通的GMAPSv3API…为什么你需要每30秒抓取一个新的标记？因为标记会改变位置。不仅仅是改变位置，你还可以有不同的标记。它是动态内容，就像当前开放的餐馆一样，如果一家餐馆关闭了，它的标记将从地图上删除，如果另一家餐馆打开了，它将被添加。json来自一个数据库。我已经尝试了一切，甚至Bob的代码，但似乎都不起作用。我一定是在做一些非常愚蠢的事情，因为我认为这是一个非常直截了当的需要。如果有人能帮助我，我将不胜感激。我开始认为最好使用普通的GMAPSv3API…谢谢Bob的建议，我会尝试一下并报告。我对这个jquery ui映射非常陌生，我很难区分映射初始化。你能帮忙吗？@fdias:试试我更新帖子中的代码。它可能很笨拙，但应该可以完成这项工作。谢谢，不幸的是，当我运行代码时，什么都没有发生。地图显示的是非洲（它是默认的中心位置，30秒后没有任何标记加载。@fdias:Web控制台（Firefox:Ctrl+Shift+K）中是否有任何错误？谢谢你的建议Bob，我会尝试一下并报告回来。我对这个jquery ui映射非常陌生，我很难分离映射初始化。你能帮忙吗？@fdias：从更新的帖子中尝试我的代码。它可能很笨拙，但应该可以完成这项工作。谢谢，不幸的是，在我运行代码时没有发生任何事情。映射显示了非洲（它是默认的中心位置，30秒后不会加载任何标记。@fdias:Web控制台（Firefox:Ctrl+Shift+K）中是否有错误？