Question

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

问题： 我需要的是，当用户提交表单时，我会将值插入MySQL。此时，我想让设备lat / long并指定为变量，这样我就可以使用这些变量同时插入MySQL。我已经在我的数据库中为lat和long准备好了表。

请给我一些提示，指导，提示我实现我的需要。非常感谢帮助。谢谢。

代码：

<!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>

Answer 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) 
});

在您的表单中添加两个imput type hidden

 <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>

PHP / HTML5：将Latitude Longitude分配给变量

1 个答案: