从表格中获取坐标并在地图上显示

Question

我正在尝试在表单中输入两个坐标，当用户单击提交时，我希望它运行“getSavedLocation()”方法。我还希望方法中的“latlon”变量从表单中获取两个坐标，而不是“position.coords.latitude”，有人可以告诉我如何解决这两个问题。这是我的代码。

<form action="getSavedLocation()" method="get">
  Latitude: <input type="text" name="saved_lat"><br>
  Longitude: <input type="text" name="saved_lon"><br>
  <input type="submit" value="Submit">
</form>

<p>Click on the submit button to view the position on a map".</p>


<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getSavedLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
  }
  </script>
  </body>

Answer 1

您可以使用运行 onclick 来获取结果，而不是重新加载页面。

Latitude: <input type="text" id="saved_lat"><br>
Longitude: <input type="text" id="saved_lon"><br>
<button type="submit" value="Submit" onclick="showPosition();">

<p>Click on the submit button to view the position on a map".</p>


<div id="mapholder"></div>
<script>

function showPosition()
{
    //var latlon=position.coords.latitude+","+position.coords.longitude;
    var lat = document.getElementById("saved_lat").value;
    var lon = document.getElementById("saved_lon").value;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
     + lat + "," + lon +"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";

 }

 </script>
 </body>