传单地图：使用 navigator.geolocation.watchPosition 更新标记？
Posted
技术标签:
【中文标题】传单地图：使用 navigator.geolocation.watchPosition 更新标记？【英文标题】：leaflet map: update marker using navigator.geolocation.watchPosition? 【发布时间】：2016-11-04 23:56:15 【问题描述】：我正在尝试使用leaflet map 来显示用户在地图上的当前位置。类似于实时 GPS 跟踪。
这是我当前的代码：
var watchID;
var geoLoc;
function showLocation(position)
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
function errorHandler(err)
if(err.code == 1)
alert("Error: Access is denied!");
else if( err.code == 2)
alert("Error: Position is unavailable!");
function getLocationUpdate()
if(navigator.geolocation)
// timeout at 60000 milliseconds (60 seconds)
var options = timeout:60000;
geoLoc = navigator.geolocation;
watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
var map = L.map('map_2385853')
googleStreets = L.tileLayer('http://s.google.com/vt/lyrs=m&x=x&y=y&z=z',
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
).addTo(map);
/*L.tileLayer('http://s.google.com/vt/lyrs=m&x=x&y=y&z=z',
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
).addTo(map);*/
map.locate(setView: true, maxZoom: 16);
function onLocationFound(e)
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
map.on('locationfound', onLocationFound);
else
alert("Sorry, browser does not support geolocation!");
getLocationUpdate();
当用户的位置发生变化时，此代码仅添加一次标记，并且不会对其执行任何其他操作（不会删除或添加另一个）。
我在我的移动设备上尝试了上面的代码，我可以确认标记只被添加一次并停留在那里。
有人可以就此提出建议吗？
这是一个有效的小提琴：
https://jsfiddle.net/31ws6z37/
编辑：
这是我到目前为止所拥有的。但我收到以下错误：
错误：
TypeError: map.removeLayer(...).bindPopup is not a function
map.removeLayer(marker)
代码：
function initializeMapAndLocator()
var map = L.map('map_2385853');
googleStreets = L.tileLayer('http://s.google.com/vt/lyrs=m&x=x&y=y&z=z',
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
).addTo(map);
map.locate(setView: true,
maxZoom: 16,
watch:true,
timeout: 60000
);
function onLocationFound(e)
var radius = e.accuracy / 2;
//L.marker(e.latlng).addTo(map)
marker = new L.Marker(e.latlng, draggable:true)
map.addLayer(marker)
map.removeLayer(marker)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
map.on('locationfound', onLocationFound);
initializeMapAndLocator();
【问题讨论】：
您是否尝试在 geoLoc.watchPosition() 回调中添加标记？ @Manuel，这就是我在我的代码中所做的！因此它被添加一次，但标记的位置没有得到更新！ 我只看到你叫“showLocation” 请添加一个小提琴，使其更容易 @Manuel，我为我的问题添加了一个小提琴。 jsfiddle.net/31ws6z37 【参考方案1】：嗯，我不清楚你为什么使用相同的方法，两种相同的方法。您正在使用Geolocation.watchPosition() 和map.locate()，它们的作用基本相同。在这个sn -p Geolocation.watchPosition()没有任何目的，它只调用了showLocation(position)，它只是初始化了两个变量。您使用的第二种方法是map.locate()，您应该选择什么功能。在这里，您添加标记是正确的，但对于 docs，您必须使用 map.locate() 将 watch 选项设置为 true。你最好删除Geolocation.watchPosition() 并简单地使用map.locate()：
function initializeMapAndLocator()
var map = L.map('map_2385853')
googleStreets = L.tileLayer('http://s.google.com/vt/lyrs=m&x=x&y=y&z=z',
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
).addTo(map);
map.locate(setView: true,
maxZoom: 16,
watch:true
);
function onLocationFound(e)
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
map.on('locationfound', onLocationFound);
initializeMapAndLocator();
FIDDLE 触发 locate 并添加一个带圆圈的标记。
【讨论】：
感谢曼努埃尔。虽然，我有点困惑。所以基本上，通过使用 watch: true 运行您的代码，地图充当实时 GPS，它会随着设备的纬度/经度变化而更新标记？ 是的，这就是你想要做的吗？ 是的，这正是我想要做的。 :)...我不知道 Leaflet 提供了开箱即用的功能（有点）.... 啊，好吧，我可以帮助你 :) 如果你还有其他问题，不要害怕问！ 我刚刚在我的设备上对其进行了测试，它似乎可以工作，但它并没有删除“上一个”标记。随着新位置（纬度/经度）的更新，它会不断添加新的。所以基本上，地图上会有这么多标记……有什么建议吗？以上是关于传单地图：使用 navigator.geolocation.watchPosition 更新标记？的主要内容，如果未能解决你的问题，请参考以下文章