javascript - How to auto-update a marker on a leaflet map, with meteor - Stack Overflow

admin管理员组

文章数量:1278979

For a school project we are having this idea of making a geospatial tag-game. You log in on our app, your location is shown on the map, and whenever you get close to another player, you tag that person. (Like children's tag but with meteor)

The issue we are having, we seem not able to auto-update our marker on the leaflet map. There's an marker showing it's just not updating.

We tried using Player.update in a time but it doesn't work.

Any suggestions?

The code

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

For a school project we are having this idea of making a geospatial tag-game. You log in on our app, your location is shown on the map, and whenever you get close to another player, you tag that person. (Like children's tag but with meteor)

The issue we are having, we seem not able to auto-update our marker on the leaflet map. There's an marker showing it's just not updating.

We tried using Player.update in a time but it doesn't work.

Any suggestions?

The code

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

• javascript
• meteor
• leaflet

Share Improve this question Follow edited Feb 27, 2018 at 12:59 radbyx 9,6702222 gold badges9090 silver badges133133 bronze badges asked Mar 8, 2013 at 10:27 user2148002user2148002 7311 gold badge11 silver badge66 bronze badges 1

• Please post the code related to this issue – sohel khalifa Commented Mar 8, 2013 at 11:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You need to clear the existing markers, otherwise they remain on the map. The easiest / most efficient way to do this is to attach the markers to a LayerGroup when you're creating them. Then, when you want to update, clear all the markers, and then add them again.

Add layer group declaration at the top, so you have

var map, markers;

After initialising the map,

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

Change this line:

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

to:

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

in your autorun, before the forEach,

markers.clearLayers();

then in your foreach,

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

本文标签： javascriptHow to autoupdate a marker on a leaflet mapwith meteorStack Overflow