7

学校のプロジェクトで、地理空間タグ ゲームを作成するというアイデアを考えています。私たちのアプリにログインすると、あなたの場所がマップに表示され、別のプレーヤーに近づくたびにその人にタグを付けます. (子供のタグのようですが流星付き)

私たちが抱えている問題は、リーフレット マップ上のマーカーを自動更新できないようです。更新されていないことを示すマーカーがあります。

Player.update を試してみましたが、うまくいきません。

助言がありますか？

コード

     if (Meteor.isClient) {

    var userLatitude;
    var userLongitude;

    var map;

    Template.map.rendered = function () {

        // Setup map
        map = new L.map('map', {
            dragging: false,
            zoomControl: false,
            scrollWheelZoom: false,
            doubleClickZoom: false,
            boxZoom: false,
            touchZoom: false
        });

        map.setView([52.35873, 4.908228], 17);
        //map.setView([51.9074877, 4.4550772], 17);

        L.tileLayer('http://{s}.tile.cloudmade.com/9950b9eba41d491090533c541f170f3e/997@2x/256/{z}/{x}/{y}.png', {
            maxZoom: 17
        }).addTo(map);

        // If user has location then place marker on map
        if (userLatitude && userLongitude) {
            var marker = L.marker([userLatitude, userLongitude]).addTo(map);
        }

        var playersList = players.find().fetch();
        playersList.forEach(function(players) {
            // Change position of all markers
            var marker = L.marker([players.latitude, players.longitude], options={"id" : 666}).addTo(map);
        });
    };

    // If the collection of players changes (location or amount of players)
    Meteor.autorun(function() {

        var playersList = players.find().fetch();
        playersList.forEach(function(players) {
            // Change position of all markers
            var marker = L.marker([players.latitude, players.longitude]).addTo(map);
        });
    });
}



if (Meteor.isServer) {
    Meteor.startup(function () {
        // code to run on server at startup

    });
}











    /*
Template.hello.events({
        'click input' : function () {
        // template data, if any, is available in 'this'
        if (typeof console !== 'undefined')
            console.log("You pressed the button");
        }
    });
*/

/*
if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {                   
                userLatitude = 52.35873;
                userLongitude = 4.908228;

                players.insert({
                    name: "Martijn",
                    latitude: userLatitude,
                    longitude: userLongitude
                });
            });
        }
*/
4

1 に答える 1

9

既存のマーカーをクリアする必要があります。そうしないと、マップ上に残ります。これを行う最も簡単で効率的な方法は、マーカーを作成するときにマーカーを LayerGroup にアタッチすることです。次に、更新する場合は、すべてのマーカーをクリアしてから、再度追加します。

レイヤーグループの宣言を一番上に追加してください。

var map, markers;

マップを初期化した後、

markers = new L.LayerGroup().addTo(map);

この行を変更します。

var marker = L.marker([userLatitude, userLongitude]).addTo(map);

に：

var marker = L.marker([userLatitude, userLongitude]).addTo(markers);

自動実行で、forEach の前に、

markers.clearLayers();

次に、あなたのforeachで、

var marker = L.marker([players.latitude, players.longitude]).addTo(markers);
于 2013-03-28T14:07:58.833 に答える