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

Posted 2023-02-23

【中文标题】从表格中获取坐标并在地图上显示

【英文标题】：Obtaining Coordinates from form and display on map

【发布时间】：2014-02-23 14:59:25

【问题描述】：

我正在尝试在表单中输入两个坐标，当用户单击提交时，我希望它运行“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);
    
  elsex.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>

【参考方案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>

【讨论】：

这样做会创建一个表单，当我点击它并且我无法点击任何其他搜索结果时，它只会显示第一条记录的地图。有什么建议么？谢谢

我的错误。应使用 id 而不是 html 输入的名称。它现在应该可以多次点击了。

这里没有使用表单标签有什么原因吗？由于某种原因，我所有的搜索结果都显示在按钮上：/

我正在使用带有 onclick 操作的 javascript 在客户端浏览器上执行更改。除非你需要做表单提交来重新加载页面，在这种情况下这是不必要的。

有没有在这个坐标上添加一个标记？并显示用户当前位置？谢谢 。抱歉所有这些问题