PHP/HTML5：将纬度经度分配给变量答案

【问题标题】：PHP/HTML5: Assign Latitude Longitude to variablesPHP/HTML5：将纬度经度分配给变量
【发布时间】：2013-12-22 16:05:41
【问题描述】：

我是 PHP/HTML5 的新手。我找到了以下 HTML5 示例来获取设备纬度和经度。但这只是通过单击按钮显示纬度/经度的示例。

问题： 我需要的是，当用户提交表单时，我会将值插入 MySQL。此时，我想获取设备纬度/经度并将其分配为变量，以便我可以使用变量同时插入 MySQL。我的数据库中已准备好经纬度表。

请给我一些提示、指导和提示，以实现我所需要的。帮助将不胜感激。谢谢。

代码：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;    
  }
</script>
</body>
</html>

形式：

<form id="form1" name="form1" method="post" action="';
echo $_SERVER['PHP_SELF'];
echo '">
  <p>Please complete this form and I will contact you as soon as possible. Thank you.</p>
  <p>
    <label for="name">Your Name</label>
    <input type="text" name="name" id="name" />
    <label for="phone">Contact Number</label>
    <input type="text" name="phone" id="phone" />
    <label for="message">Message to Owner</label>
    <textarea name="message" id="message" cols="45" rows="5"></textarea>
    <input type="submit" name="submit" id="submit" value="Submit Info" />
  </p>
</form>

带有建议代码的新的更简单的表单示例

<!DOCTYPE html> 
<html> 
    <head> 
    <title>FurkidTag.com</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Sample Form</title>
</head>

<body>

<script>
$(function() {

    $("input[name='latitude']").val(position.coords.latitude);
    $("input[name='longitude']").val(position.coords.longitude) 
});
</script>

<?php
if(isset($_POST['submit'])) 
{ 
    $name = $_POST['name'];
    $lat = $_POST['latitude'];
    $lon = $_POST['longitude'];
    echo "User Has submitted the form and entered this name : <b> $name </b>";
    echo "<br>Latitude: $lat."; 
    echo "<br>Longitude: $lon."; 
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
   <input type='hidden' value='' name='latitude'/>
   <input type='hidden' value='' name='longitude'/>
   <input type="text" name="name"><br>
   <input type="submit" name="submit" value="Submit Form"><br>
</form>
</body>
</html>

【问题讨论】：

标签： php html geolocation latitude-longitude

【解决方案1】：

您需要使用 AJAX 将值传递给另一个页面中的 PHP，在此示例中，我使用 Jquery 发出 ajax 请求

$(function() {
   $.get('getPosition.php', {
    Latitude: position.coords.latitude,
    Longitude: position.coords.longitude
    }
});

在您的 getPosition.php 中，您必须获取如下值：

$latitude = (isset($_GET['latitude']) && is_numeric($_GET['latitude']) ? $_GET['latitude'] : NULL;
$longitude = (isset($_GET['longitude']) && is_numeric($_GET['longitude']) ? $_GET['longitude'] : NULL;

然后制作你的 sql 东西

更新将值绑定到您的输入表单

$(function() {

    $("input[name='latitude']").val(position.coords.latitude);
    $("input[name='longitude']").val(position.coords.longitude) 
});

在您的表单中添加两个隐藏的输入类型

 <input type='hidden' value='' name='latitude'/>
 <input type='hidden' value='' name='longitude'/>

更新 2

<?php
if (isset($_POST['submit'])) {
  $name = $_POST['name'];
  $lat = $_POST['latitude'];
  $lon = $_POST['longitude'];
  echo "User Has submitted the form and entered this name : <b> $name </b>";
  echo "<br>Latitude: $lat.";
  echo "<br>Longitude: $lon.";
}
?>
<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      var x = document.getElementById("demo");
      function getLocation()
      {
        if (navigator.geolocation)
        {
          navigator.geolocation.getCurrentPosition(bindPosition);
        }
        else {
          x.innerHTML = "Geolocation is not supported by this browser.";
        }
      }
      function bindPosition(position) {
        $("input[name='latitude']").val(position.coords.latitude);
        $("input[name='longitude']").val(position.coords.longitude);
      }
    </script>
  </head>
  <body onload="getLocation()">


    <form id="form1" name="form1" method="post" action="">
      <p>Please complete this form and I will contact you as soon as possible. Thank you.</p>
      <p>
        <label for="name">Your Name</label>
        <input type="text" name="name" id="name" />
        <label for="phone">Contact Number</label>
        <input type="text" name="phone" id="phone" />
        <label for="message">Message to Owner</label>
        <textarea name="message" id="message" cols="45" rows="5"></textarea>
        <input type='hidden' value='' name='latitude'/>
        <input type='hidden' value='' name='longitude'/>
        <input type="submit" name="submit" id="submit" value="Submit Info" />
      </p>
    </form>

  </body>
</html>

【讨论】：

嗨@EmilioGort，非常感谢您提供的示例。但我的表单动作是_SELF。所以我假设我需要在提交表单的同时 POST/GET 值。
您能否提供一些示例以在提交表单时发布/获取纬度/经度值？
将表单添加到您的原始帖子，而不是答案，您的编辑已被拒绝。
非常抱歉，非常混乱，第一次使用 StackOverflow。道歉。
@emiliogort，再次。非常感谢。我会尝试第二次更新。