如何使用 LeafletJS/Mapbox 在 web 地图中跟踪我的位置？答案

【问题标题】：How can I track my location in a web map using LeafletJS/Mapbox?如何使用 LeafletJS/Mapbox 在 web 地图中跟踪我的位置？
【发布时间】：2015-11-18 19:23:13
【问题描述】：

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

【问题讨论】：

标签： geolocation leaflet mapbox

【解决方案1】：

由于我在任何地方都找不到一个很好的例子，所以我决定创建自己的。在您的移动设备上试用有效的网络应用程序。希望这对其他人有所帮助。

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

【讨论】：

在你的 jsfiddle 中，我应该在我的网站中使用什么字符串而不是“hanislovingit.kep5bm68”var map = L.mapbox.map('map', 'hanislovingit.kep5bm68'); 在 mapbox 网站中我看到 mapbox.streets 它是什么？
我认为字符串 'hanislovingit.kep5bm68' 是我在 Mapbox 帐户中的测试项目名称。您可以在 Mapbox 帐户中创建自己的项目并使用它。顺便说一句，如果您正在考虑将 Mapbox 用于浏览器，请使用新的 MapboxGL.js，它利用客户端计算机的显卡以获得更好的性能。