リーフレットマップのマーカーを流星で自動更新する方法

Question

学校のプロジェクトでは、地理空間タグゲームを作成するという考えがあります。あなたは私たちのアプリにログインし、あなたの位置は地図上に表示され、他のプレイヤーに近づくと、その人にタグを付けます。 （子どものタグと同じですが流星のようです）

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

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 
       }); 
      }); 
     } 
*/ 

Answer 1

あなたは、そうでない場合は、地図上に残り、既存のマーカーをクリアする必要があります。これを行う最も簡単で効率的な方法は、レイヤーグループを作成するときにマーカをレイヤーグループに添付することです。次に、更新する場合は、すべてのマーカーをクリアしてから、再度マーカーを追加します。あなたがマップを初期化した後

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の中に、その後のforEach前に、あなたの自動実行中

、

markers.clearLayers(); 

、

var marker = L.marker([players.latitude, players.longitude]).addTo(markers);