Javascript leafletjs 获取用户位置以进行距离计算

Question

我目前正在尝试创建一个地图应用程序，到目前为止地图加载和自定义信息和图标工作完美。但是，我想向用户显示到地图上标记的距离（距离）。

此代码有效，但我希望 "from" 变量是用户当前位置而不是预定位置。

var onePlace = L.marker([63, 20], {icon: thisIcon}).bindPopup('My text'),
    theOtherPlace = L.marker([65, 20], {icon: thatIcon}).bindPopup('My text');

var to = onePlace.getLatLng();
var from = theOtherPlace.getLatLng();
var distance = from.distanceTo(to);

为了设置用户在地图上的位置，我使用了他们的快速入门指南中的代码，看起来像这样

    primaryMap.locate({
    });

    primaryMap.on('locationfound', positionFound);
    primaryMap.on('locationerror', positionNotFound);

    function positionFound(e) { 

    var myPosition = L.marker(e.latlng, {
    }).addTo(primaryMap);
}    
    function positionNotFound(e) {
    alert(e.message);
}

但是后期如何拿到这里设置的位置是我比较纠结的问题

基本上我想要的就是这个

var myPos = [??].getLatLng();
var to = onePlace.getLatLng();
var distance = myPos.distanceTo(to);

第一次发帖，部分代码格式奇怪，请见谅。

无论如何，如果有人能帮助我，我将非常感激。一直坚持这个问题，似乎无法在文档中找到任何有用的东西（可能只是不太理解它，因为我对此很陌生）。

提前致谢！

更新：

jsfiddle：https://jsfiddle.net/xcyniic/98sy6zxb/27/ 也许这可以帮助阐明我在做什么/做错了什么。

Answer 1

您从 locationfound 事件中获取经纬度。

primaryMap.on('locationfound', positionFound);
function positionFound(e) { 
   var myPos = e.latlng;
   var to = onePlace.getLatLng();
   var distance = myPos.distanceTo(to); 
}

更新

要在外部获取 pos 值，您必须在外部创建变量并测试它是否不为空；

var myPos = null;
primaryMap.on('locationfound', positionFound);
function positionFound(e) { 
   myPos = e.latlng;
   calcDistances();
}


function calcDistances(){
   if(myPos){
      var to = onePlace.getLatLng();
      var distance = myPos.distanceTo(to); +

      var to2 = twoPlace.getLatLng();
      var distance = myPos.distanceTo(to2); 

      //...
   }
}

我觉得你想错了。 locationfound 事件不会立即调用，它是一个异步服务。所以你必须在调用事件并找到用户位置后计算距离。

Javascript leafletjs 获取用户位置以进行距离计算

Javascript leafletjs get user position for distance calc

javascript

geopositioning

leaflet