2

我已经搜索了整个网络和 SO，但我无法弄清楚这一点。

这是问题所在：

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

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

它可以很好地加载我的标记，但我需要每 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>

干杯。

4

2 回答 2

0

您的地图初始化函数在mapTest()函数内部 - 您每 30 秒使用setInterval.

这是错误的，因为您实际上是在重新加载地图（您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 );

});
于 2012-06-15T20:27:47.427 回答
0

我找到了一种无需重新加载地图即可更新标记的解决方案。试试这个代码...

$(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 秒更新一次..

于 2013-06-19T07:36:37.773 回答