如何使用流星自動更新傳單地圖上的標記

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

你需要清除現有的標記，否則他們一直顯示在地圖上。最簡單/最有效的方法是在創建它們時將標記附加到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);