Question

我正在尝试创建一种使用Vincenty逆公式并使用Leaflet js确定两个点（在我的情况下为两个地址）之间距离的表单。目前，我正在研究从用户输入的地址中获取坐标的部分。

我能够找到一个显示如何获取坐标的示例。在此示例中，我对其进行了一些修改。但是，我很难用一个搜索按钮来查找两个地址以及它们的纬度/经度。

这是html：

<div class="container">

<b>Address1 Coordinates</b>
<form>
<input type="text" name="lat" id="lat1" size=12 value="">
<input type="text" name="lon" id="lon1" size=12 value="">
</form>

<b>Address2 Coordinates</b>
<form>
<input type="text" name="lat" id="lat2" size=12 value="">
<input type="text" name="lon" id="lon2" size=12 value="">
</form>

<b>Address Lookup1</b>
<div id="search">
<input type="text" name="addr" value="" id="addr" size="58" />
<div id="results"></div>
</div><br />

<b>Address Lookup2</b>
<div id="search2">
<input type="text" name="addr" value="" id="addr2" size="58" />
<div id="results"></div>
</div><br />
<button type="button" onclick="addr_search();">Search</button>

<br />

<div id="map" style="display:none"></div>

</div>

以下是我用来查找坐标的脚本：

    function myFunction(arr)
{
 var out = "<br />";
 var i;

 if(arr.length > 0)
 {
  for(i = 0; i < arr.length; i++)
  {
    console.log(arr[i].lat + ", " + arr[i].lon);
  }
  document.getElementById('results').innerHTML = out;
 }
 else
 {
  document.getElementById('results').innerHTML = "Sorry, no results...";
 }

}

function addr_search()
{
 var inp = document.getElementById("addr");
 var xmlhttp = new XMLHttpRequest();
 var url = "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + inp.value;
 xmlhttp.onreadystatechange = function()
 {
   if (this.readyState == 4 && this.status == 200)
   {
    var myArr = JSON.parse(this.responseText);
    myFunction(myArr);
   }
 };
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
}

</script>

使用一个搜索按钮搜索两个地址

0 个答案: