Come aggiornare automaticamente un marker su una mappa di volantini, con meteore

Question

Per un progetto scolastico abbiamo l'idea di creare un gioco di tag geospaziale. Accedi alla nostra app, la tua posizione viene mostrata sulla mappa e quando ti avvicini a un altro giocatore, tagghi quella persona. (Come tag per bambini ma con meteorite)

Il problema che stiamo riscontrando non sembra essere possibile aggiornare automaticamente il nostro indicatore sulla mappa del volantino. C'è un indicatore che mostra che non si sta aggiornando.

Abbiamo provato a utilizzare Player.update in un momento, ma non funziona.

Qualche suggerimento?

Il codice

 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

È necessario cancellare i marcatori esistenti, altrimenti restano sulla mappa. Il modo più semplice/più efficace per farlo è quello di associare i marcatori a un gruppo di livelli durante la creazione. Quindi, quando si desidera aggiornare, cancellare tutti i marcatori e quindi aggiungerli di nuovo.

Add dichiarazione del gruppo di layer in alto, in modo da avere

var map, markers; 

Dopo l'inizializzazione della mappa,

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

Modifica questa linea:

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

a:

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

nel vostro autorun, prima della forEach,

markers.clearLayers(); 

poi nel vostro foreach,

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