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

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.

我们尝试在一段时间内使用Player.update但它不起作用。

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

1 个解决方案

#1

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.

您需要清除现有标记,否则它们将保留在地图上。最简单/最有效的方法是在创建LayerGroup时将标记附加到LayerGroup。然后,当您想要更新时,清除所有标记,然后再次添加它们。

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,

在你的自动运行中,在forEach之前,

markers.clearLayers();

then in your foreach,

然后在你的foreach,

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

#1