我正在尝试将两个坐标输入到表单中,当用户单击“提交”时,我希望它运行“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>
答案 0 :(得分:0)
您可以使用运行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>