传单地图：使用navigator.geolocation.watchPosition更新标记？ [英] leaflet map: update marker using navigator.geolocation.watchPosition?
问题描述
我尝试使用传单地图来显示用户的当前位置地图。就像现场的GPS跟踪一样。
这是我当前的代码：
var watchID;
var geoLoc;
function showLocation（position）{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$ b函数errorHandler（err）{
if（err.code == 1）{
alert（Error：Access is denied！）;
}
else if（err.code == 2）{
alert（Error：Position is unavailable！）;
函数getLocationUpdate（）{
if（navigator.geolocation）{
// 60000毫秒（60秒）超时
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& copy;< a href =http://openstreetmap.org> OpenStreetMap< / a>贡献者< 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}）;
函数onLocationFound（e）{
var radius = e.accuracy / 2;
L.marker（e.latlng）.addTo（map）
.bindPopup（你在±半径+米之内）openPopup（）;
L.circle（e.latlng，radius）.addTo（map）;
}
map.on（'locationfound'，onLocationFound）;
其他{
alert（对不起，浏览器不支持地理定位！
}
}
getLocationUpdate（）;
此代码只添加标记一次，并且不会执行任何其他操作（不会删除或者添加另一个）。
我在移动设备上试过上面的代码，我可以确认标记只添加一次并停留在那里。 / p>
有人可以就此提出建议吗？
这是一个可行的方法： //jsfiddle.net/31ws6z37/rel =nofollow noreferrer> https://jsfiddle.net/31ws6z37/
编辑：
>这是迄今为止我所拥有的。但出现以下错误：
错误：
TypeError：map.removeLayer（...）。bindPopup不是函数
map.removeLayer（marker）
CODE：
function initializeMapAndLocator（）{
var map = L.map（'map_2385853'）;
googleStreets = L.tileLayer（'http：// {s} .google.com / vt / lyrs = m& x = {x}& y = {y}& amp ; z = {z}'，{
maxZoom：20，
subdomains：['mt0'，'mt1'，'mt2'，'mt3']
}）。addTo（map ）;
$ b map.locate（{setView：true，
maxZoom：16，
watch：true，
timeout：60000
}）;
函数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（你在±半径+米之内）openPopup（）;
L.circle（e.latlng，radius）.addTo（map）;
}
map.on（'locationfound'，onLocationFound）;
}
initializeMapAndLocator（）;
解决方案嗯，我不清楚你为什么使用，两种方法相同的方法。您正在使用
Geolocation.watchPosition（）和map.locate（ ），它们基本上是一样的。在这个片段Geolocation.watchPosition（）没有任何用途，它只调用showLocation（position），它只是初始化两个变量。您使用的第二种方法是map.locate（），你应该选择什么功能。在这里，您正在做正确的添加标记，但关于文档，您必须使用map.locate（）将watch选项设置为true >。您最好删除地理定位.watchPosition（），只需使用map.locate（）：
$ p $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
}）;
函数onLocationFound（e）{
var radius = e.accuracy / 2;
L.marker（e.latlng）.addTo（map）
.bindPopup（你在±半径+米之内）openPopup（）;
L.circle（e.latlng，radius）.addTo（map）;
}
map.on（'locationfound'，onLocationFound）;
}
initializeMapAndLocator（）;
这里有一个 FIDDLE 触发定位并添加一个带有圆圈的标记。
I'm trying to use a leaflet map to show the current position of the user on the map. Something like a live GPS tracking.
This is my current code:
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();
This code only adds the marker once and doesn't do anything else with it (doesn't remove or add another) when the user's location changes.
I tried the above code on my mobile device and I can confirm that the marker only gets added once and stays there.
Could someone please advise on this?
HERE IS A WORKING FIDDLE:
https://jsfiddle.net/31ws6z37/
EDIT:
This is what i have so far. but I get the following error:
ERROR:
TypeError: map.removeLayer(...).bindPopup is not a function
map.removeLayer(marker)
CODE:
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();
Hm it's not clear for me why you are using, two same methods for the same approach. You are using Geolocation.watchPosition() and map.locate(), which do fundamentally the same things. In this snippet Geolocation.watchPosition() has no purpose, it only call's showLocation(position), which just initialize two variables. The second method you are using is map.locate(), what should be your function of choice. Here you are doing right to add your marker, but regarding to the docs you have to set the watch option to true using map.locate() . You are going better to remove the Geolocation.watchPosition() and to it simply with 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();
Here goes a FIDDLE triggering locate and adding a marker with circle.
这篇关于传单地图：使用navigator.geolocation.watchPosition更新标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
