如何使用LeafletJS / Mapbox在Web地图中跟踪我的位置?

时间:2015-11-18 19:23:13

标签: geolocation leaflet mapbox

在最近的一个项目中,我必须为Web应用程序实现地理位置跟踪功能,该应用程序在由LeafletJS / Mapbox支持的地图上显示用户数据。传单doc for "map.locate()" API"watch" locate option很有帮助,但我找不到一个很好的例子,说明它们如何协同工作,或使用Leaflet进行连续位置跟踪的情况。

1 个答案:

答案 0 :(得分:0)

由于我无法在任何地方找到一个好的例子,我决定创建自己的。在移动设备上尝试使用工作网络应用。希望这有助于其他人。

var marker, circle;

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    if(marker) {
        map.removeLayer(marker);
    }

    if(circle) {
        map.removeLayer(circle);
    }                

    marker = L.marker(e.latlng);
    circle = L.circle(e.latlng, radius);

    marker.addTo(map)
        .bindPopup("You are within " + radius + " meters from this point").openPopup();

    circle.addTo(map);            
}

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

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

map.locate({setView: true, 
            maxZoom: 20,
           watch: true,
           enableHighAccuracy: true,
           maximumAge: 15000,
           timeout: 3000000});

工作应用http://jsfiddle.net/hanislovingit/7n2wf0kg/12