Question

有。我有一个在node.js中工作的应用程序，该应用程序可以找到用户并在传单地图上绘制其位置。当其他人连接时，它也显示了它们。只要他们移动鼠标，它就能使标记保持活动状态。我想更改几件事，但不确定从哪里开始，并且会得到一些建议。

1）在用户移动时更新他们的标记。 2）只要连接处于活动状态，就保持标记处于活动状态，而不是只要它们在移动鼠标或大体上移动（只要它们停在约尼上即可）。

我知道我可以使用监视功能，但是不确定在哪里添加它。我将在地图中放置application.js代码，并放置标记代码。如果还有其他需要补充的内容，请询问。

更新：我有手表功能，但它不更新标记吗？我知道是因为我可以提醒（拉特）;

navigator.geolocation.watchPosition(positionSuccess, positionError, { enableHighAccuracy: true });

https://77.68.31.152上有我现在运行的实时版本

我并没有要求任何人这样做，只是指向正确的方向。例如，如果我需要从头开始，或者可以更改已经拥有的东西。

application.js是

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


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

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

    // check whether browser supports geolocation api
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
    } 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

    map = L.map('map').fitWorld();

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);

        userMarker.addTo(map);
        userMarker.bindPopup('<p>You are here ' + username + '</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,
                    name: username
                }]
            };

            if ($.now() - emit > 1) {
                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 num = +$("#count").text() + 1;
            $("#count").text(num);

            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>' + data.coords[i].name);
            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 > 200000) {
            var num = +$("#count").text() - 1;
            $("#count").text(num);
                delete connects[ident];
                map.removeLayer(markers[ident]);
            }
        }
    }, 15000);
});

非常感谢

向实时地图添加监视和更新功能

0 个答案: