javascript - 如何使用 meteor 自动更新传单 map 上的标记

Question

对于一个学校项目，我们有制作地理空间标签游戏的想法。你登录我们的应用程序，你的位置就会显示在 map 上，每当你靠近另一个玩家时，你就会标记那个人。 (像 child 标签，但带有 meteor )

我们遇到的问题是，我们似乎无法自动更新传单 map 上的标记。有一个标记显示它只是没有更新。

我们曾尝试过使用 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

您需要清除现有标记，否则它们会保留在 map 上。最简单/最有效的方法是在创建标记时将标记附加到 LayerGroup。然后，当你想更新的时候，清除所有标记，然后重新添加。

在顶部添加层组声明，所以你有

var map, markers;

初始化 map 后，

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