2

私はウェブ全体とSOを検索しましたが、これを理解できませんでした。

問題は次のとおりです。

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>

乾杯。

4

2 に答える 2

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 に答える
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 に答える