具有navigator.geolocation.watchPosition的连续标记 [英] Successive markers with navigator.geolocation.watchPosition
本文介绍了具有navigator.geolocation.watchPosition的连续标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Leaflet和OpenStreetMap。另外，我使用nodejs中的socket.io发送地理位置数据。
用户的位置用代码显示成功：
navigator.geolocation.getCurrentPosition（.........）
现在我想要用户的位置每X秒在地图上更新一次。所以我换了代码：
navigator.geolocation.watchPosition（.........）
我的问题是每隔X秒就会添加一个新标记，并且最旧的标记不会被删除。
有人可以帮我吗？
我的js代码：
$（function（）{
//生成唯一的用户ID
var userId = Math.random（）。toString（16）.substring（2,15）;
var socket = io.connect（'/'）;
var info = $（'＃infobox'）;
var doc = $（document）;
//定制标记的图标样式
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 =新的tinyIcon（{iconUrl：'../public/assets/marker-yellow.png'}）;
var sentData = {};
var connections = {} ;
var markers = {};
var如果（！（连接中的data.id））{
setMarker（data（数据））（
） ）;
}
连接[data.id] =数据;
连接[data.id] .updated = $ .now（）; （新日期）.getTime（）
}）;
//检查浏览器是否支持地理定位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;
//标记用户位置
var userMarker = L.marker（[lat，lng]，{
图标：redIcon
}）;
//取消注释静态调试
// userMarker = L.marker（[51.45，30.050]，{icon：redIcon}）;
//载入传单地图
//传单API密钥集合器
//设定地图范围
userMarker.addTo（map）;
userMarker.bindPopup（'< p>你在那里！你的ID是'+ userId +'< / p>'）。
var emit = $ .now（）;
//在用户活动时发送坐标
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（）;
}
}）;
$ b doc.bind（'mouseup mouseleave'，function（）{
active = false;
}）;
//显示连接标记
函数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>一个外部用户在这里！< / p>'）;
标记[data.id] = marker;
//处理地理位置api错误
函数positionError（错误）{
var errors = {
1：'Authorization失败'，//许可被拒绝
2：'无法检测到你的位置'，//位置不可用
3：'连接超时'//超时
};
showError（'Error：'+ errors [error.code]）;
function showError（msg）{
info.addClass（'error'）。text（msg）;
doc.click（function（）{
info.removeClass（'error'）;
}）;
}
//每15秒删除非活动用户
setInterval（function（）{
for（var ident in connections）{
if（$ （标识[ident]）;
}
} .now（） - 连接[
}，30000）;
}）;
解决方案
我想这与讨论的基本相同在移动标记问题。
因此，只需在添加新标记之前删除之前的标记即可。
I use Leaflet and OpenStreetMap. In addition, I send geolocation data with socket.io in nodejs.
The position of the user is displayed successfully with the code:
navigator.geolocation.getCurrentPosition(.........)
Now I want the position of the user is updated on the map every X seconds. So I replaced the code:
navigator.geolocation.watchPosition(.........)
My problem is that a new marker is added geolocation every X seconds, and the oldest markers are not removed.
Could someone help me please?
My js code:
$(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);
});
解决方案
I suppose this would be basically the same issue as discussed in Move Marker question.
Thus, simply remove the earlier marker before you add new one..
这篇关于具有navigator.geolocation.watchPosition的连续标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
