Javascript 地理位置：如何计算用户当前位置到地理坐标的距离

我有一个JSON文件，其中的数据包含医院地址的地理位置坐标

我想使用最终用户的地理位置坐标计算最终用户的当前位置和医院地址之间的距离

用户应该看到的是一个医院列表，从离他们最近的医院开始

到目前为止，我已经设法使用AJAX将医院数据列表返回给用户。然而，这也显示了医院的纬度和经度

我只使用HTML5地理定位API，不使用谷歌地图

HTML

<div id="data"></div>
<div id="user"></div>

JavaScript

function loadHospitalData(){
  var url = 'https://api.myjson.com/bins/qk08h';
  $.ajax({
    url: url,
    method: 'GET',
  }).done(function(result){
    var data = result.surrey;
    var $data = $('#data');

    data.forEach(function(item){
      var $ul = $('<ul></ul>');
      for (field in item) {
        $ul.append(`<li>${item[field]}</li>`)
      }
      $data.append($ul);
    });

    $('#data').replaceWith($data);
    }).fail(function(error){
      console.error(error);
  });
}

loadHospitalData();

// Get user's current location
function getLocation(){
  var x = document.getElementById('user');
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  }else{
    showError();
  }
  function showPosition(position){
    x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
  }
}

function showError(error){
  var message;

  switch(error.code){
    case error.PERMISSON_DENIED:
      message.innerHTML = "User denied the request for Geolocation."
    break;
    case error.POSITION_UNAVAILABLE:
      message.innerHTML = "Location information is unavailable."
    break;
    case error.TIMEOUT:
      message.innerHTML = "The request to get user location timed out."
    break;
    case error.UNSUPPORTED_BROWSER:
      message.innerHTML = "Geolocation is not supported by this browser.";
    break;
    case error.UNKNOWN_ERROR:
      message.innerHTML = "An unknown error occured."
    break;
  }
}
getLocation();

函数loadHospitalData（）{
var url='1〕https://api.myjson.com/bins/qk08h';
$.ajax({
url:url，
方法：“GET”，
}).完成（功能（结果）{
var数据=result.surry；
var$data=$（“#data”）；
data.forEach（功能（项）{
var$ul=$（“
”）；
用于（项目中的字段）{
$ul.append（`li>${item[field]}`）
}
$data.append（$ul）；
});
$（“#数据”）。替换为（$data）；
}).失败（功能（错误）{
控制台错误（error）；
});
}
loadHospitalData（）；
//获取用户的当前位置
函数getLocation（）{
var x=document.getElementById（'user'）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
淋浴器（）；
}
功能显示位置（位置）{
x、 innerHTML=“Latitude:”+position.coords.Latitude+”
经度：“+position.coords.Longitude；
}
}
功能错误（错误）{
var消息；
开关（错误代码）{
案例错误。PERMISSON_被拒绝：
message.innerHTML=“用户拒绝了地理定位请求。”
打破
案例错误。位置不可用：
message.innerHTML=“位置信息不可用。”
打破
大小写错误。超时：
message.innerHTML=“获取用户位置的请求超时。”
打破
案例错误。不支持的\u浏览器：
message.innerHTML=“此浏览器不支持地理位置。”；
打破
案例错误。未知错误：
message.innerHTML=“发生未知错误。”
打破
}
}
getLocation（）；

以下是我迄今为止所做的一系列工作

JSON数据存储在这里

---

任何帮助都要提前感谢。谢谢大家!

“你想要的是行驶距离还是直线距离？”二江问得好。我想要驾驶距离，因为直线距离没有考虑到可能的障碍，如湖泊或丘陵，这会增加预计到达时间。在这种情况下，我需要使用谷歌地图API吗？在谷歌搜索了一段时间后，我发现谷歌地图距离矩阵API可能是我最好的选择。