如何使用流星自动更新传单地图上的标记

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);