带有 navigator.geolocation.watchPosition 的连续标记

Posted 2023-02-23

【中文标题】带有 navigator.geolocation.watchPosition 的连续标记

【英文标题】：Successive markers with navigator.geolocation.watchPosition

【发布时间】：2014-04-09 10:18:57

【问题描述】：

我使用 Leaflet 和 OpenStreetMap。此外，我在 nodejs 中使用 socket.io 发送地理定位数据。

用代码成功显示用户的位置：

navigator.geolocation.getCurrentPosition(.........)

现在我希望用户在地图上的位置每 X 秒更新一次。所以我替换了代码：

navigator.geolocation.watchPosition(.........)

我的问题是每隔 X 秒会添加一个新标记，并且不会删除最旧的标记。

有人可以帮帮我吗？

我的js代码：

$(function() 
    // generate unique user id
    var userId = Math.random().toString(16).substring(2,15);
    var socket = io.connect('/');


    var info = $('#infobox');
    var doc = $(document);

    // custom marker's icon styles
    var tinyIcon = L.Icon.extend(
        options: 
            shadowUrl: '../public/assets/marker-shadow.png',
            iconSize: [25, 39],
            iconAnchor:   [12, 36],
            shadowSize: [41, 41],
            shadowAnchor: [12, 38],
            popupAnchor: [0, -30]
        
    );
    var redIcon = new tinyIcon( iconUrl: '../public/assets/marker-red.png' );
    var yellowIcon = new tinyIcon( iconUrl: '../public/assets/marker-yellow.png' );

    var sentData = ;

    var connects = ;
    var markers = ;
    var active = false;

    socket.on('load:coords', function(data) 
        if (!(data.id in connects)) 
            setMarker(data);
        

        connects[data.id] = data;
            connects[data.id].updated = $.now(); // shothand for (new Date).getTime()
    );

    // check whether browser supports geolocation api
    if (navigator.geolocation) 
        navigator.geolocation.watchPosition(positionSuccess, positionError,  enableHighAccuracy: true, maximumAge : 1000, timeout : 2000 );
     else 
        $('.map').text('Your browser is out of fashion, there\'s no geolocation!');
    

    function positionSuccess(position) 
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        var acr = position.coords.accuracy;

        // mark user's position
        var userMarker = L.marker([lat, lng], 
            icon: redIcon
        );
        // uncomment for static debug
        // userMarker = L.marker([51.45, 30.050],  icon: redIcon );

        // load leaflet map


        // leaflet API key tiler


        // set map bounds

        userMarker.addTo(map);
        userMarker.bindPopup('<p>You are there! Your ID is ' + userId + '</p>').openPopup();

        var emit = $.now();
        // send coords on when user is active
        doc.on('mousemove', function() 
            active = true;

            sentData = 
                id: userId,
                active: active,
                coords: [
                    lat: lat,
                    lng: lng,
                    acr: acr
                ]
            ;

            if ($.now() - emit > 30) 
                socket.emit('send:coords', sentData);
                emit = $.now();
            
        );
    

    doc.bind('mouseup mouseleave', function() 
        active = false;
    );

    // showing markers for connections
    function setMarker(data) 
        for (var i = 0; i < data.coords.length; i++) 
            var marker = L.marker([data.coords[i].lat, data.coords[i].lng],  icon: yellowIcon ).addTo(map);
            marker.bindPopup('<p>One more external user is here!</p>');
            markers[data.id] = marker;
        
    

    // handle geolocation api errors
    function positionError(error) 
        var errors = 
            1: 'Authorization fails', // permission denied
            2: 'Can\'t detect your location', //position unavailable
            3: 'Connection timeout' // timeout
        ;
        showError('Error:' + errors[error.code]);
    

    function showError(msg) 
        info.addClass('error').text(msg);

        doc.click(function() 
            info.removeClass('error');
        );
    

    // delete inactive users every 15 sec
    setInterval(function() 
        for (var ident in connects)
            if ($.now() - connects[ident].updated > 30000) 
                delete connects[ident];
                map.removeLayer(markers[ident]);
            
        
    , 30000);
);

【参考方案1】：

我想这与Move Marker问题中讨论的问题基本相同。

因此，只需在添加新标记之前删除较早的标记..