我正在尝试使用传单地图来显示用户在地图上的当前位置。类似实时 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();
嗯,我不清楚你为什么要使用两种相同的方法来实现相同的方法。您正在使用
Geolocation.watchPosition()
和 map.locate()
,它们基本上执行相同的操作。在这段代码中,Geolocation.watchPosition()
没有任何用途,它只调用showLocation(position)
,它只是初始化两个变量。您使用的第二种方法是map.locate()
,您应该选择什么函数。在这里,您正确地添加了标记,但是对于 docs,您必须使用 watch
将 true
选项设置为 map.locate()
。您最好删除 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 并添加带有圆圈的标记。
我发现,如果您使用 leaflet map.locate() 方法,您确实“必须在那里”,因为如果您尝试更改浏览器中传感器的位置进行测试,该方法会抛出错误。如果你想在浏览器中伪造位置(再次进行测试),只有 navigator.geolocation.watchPosition(postition => do stuff) 对我有用。 如果有人知道解释,请分享。 :)