使用LEAFLE API更新地理位置标记，而不是添加新的地理位置标记 [英] Update geolocation marker instead of adding new one with leaflet api

问题描述

每次位置更新时，它都会放置一个新标记，而不是移动现有标记。我只是想在屏幕上有一个标记，而不是每次应用程序更新位置时放置一个新的标记(忽略最大年龄和频率，我正在测试一些东西，我知道它们不是问题)。提前谢谢您。

(加载地图的代码)

    function onLocationFound(e) {

                                var marker= L.icon({iconUrl: 'greendot.png'});
    var radius = e.accuracy /2;

    L.marker(e.latlng, {icon: marker}).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();



                                  }

    function onLocationError(e) {
        alert(e.message);
    }


    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({watch: true, setView: true, maxZoom: 16, enableHighAccuracy: true, maximumAge:10000, frequency: 1});

编辑：我尝试了几种解决方案，但标记仍然没有移动，它只是添加了一个新的解决方案。有什么想法吗？

推荐答案

您可以更新现有标记，而不是每次都创建新标记：

var marker = L.icon({iconUrl: 'greendot.png'});
var movingMarker = L.marker([0,0], 0, {icon: marker}).addTo(map);

function onLocationFound(e) {
    var radius = e.accuracy /2;
    movingMarker.setLatLng(e.latlng);
    movingMarker.unbindPopup();
    movingMarker.bindPopup("You are within " + radius + " meters from this point")
    movingMarker.redraw();
}

function onLocationError(e) {
    alert(e.message);
}

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);

map.locate({watch: true, setView: true, maxZoom: 16, enableHighAccuracy: true, maximumAge: 10000});

我刚刚发现了一个类似的问题(具有相似的答案)：update marker location with leaflet API

这篇关于使用LEAFLE API更新地理位置标记，而不是添加新的地理位置标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！