将 HTML5 地理位置纬度和经度值插入数据库

Question

The following code gives me the latitude and longitude of the device.以下代码为我提供了设备的纬度和经度。

<!DOCTYPE html>
<html>
  <body>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
    <p id="demo"></p>
    <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>

I want to insert them into the database on page load but not sure how to do it.我想在页面加载时将它们插入到数据库中，但不知道该怎么做。

$lat = ''; // Latitude value from javascript above
$long = ''; // Longitude value from javascript above

$stmt = $pdo->prepare("INSERT INTO members(mem_lat, mem_long)VALUES(:lat, :long)");
$stmt-> bindValue(':lat', $lat);
$stmt-> bindValue(':long', $long);
$stmt-> execute();

I am not sure how to get the Latitude and Longitude value from the javascript to $lat and $long on page load.我不确定如何在页面加载时从 javascript 获取纬度和经度值到$lat和$long 。 Any help would be appreciated.任何帮助，将不胜感激。

Answer 1

Due to new security standards, this couldn't be executed in this snippet and should be working on a hosted page with SSL enabled (HTTPS).由于新的安全标准，这无法在此代码段中执行，并且应该在启用 SSL (HTTPS) 的托管页面上工作。 The timeout added to the function would be useful to wait for a better gps accuracy after page loading...添加到函数中的超时对于在页面加载后等待更好的 GPS 精度很有用...

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Form</title> <script> function postAjax(url, data, success) { var params = typeof data == 'string' ? data : Object.keys(data).map( function (k) { return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&'); var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open('POST', url); xhr.onreadystatechange = function () { if (xhr.readyState > 3 && xhr.status == 200) { success(xhr.responseText); } }; xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(params); return xhr; } function showPosition(position) { var x = document.getElementById("demo"); var latitude = position.coords.latitude; var longitude = position.coords.longitude; x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; postAjax('/gpsinsert.php', { lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude) }, function(data){ console.log(data); }); } function errorHandler(err) { if (err.code == 1) { alert("Error: Access is denied!"); } else if (err.code == 2) { alert("Error: Position is unavailable!"); } } function getLocation() { var x = document.getElementById("demo"); if (navigator.geolocation) { // timeout for better GPS Accuracy ! var options = { timeout: 20000 }; navigator.geolocation.getCurrentPosition(showPosition, errorHandler, options); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } window.onload = getLocation() </script> </head> <style> </style> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> </body> </html>

将 HTML5 地理位置纬度和经度值插入数据库

问题描述

1 个解决方案

解决方案1
1 2020-03-05 22:42:01

将 HTML5 地理位置纬度和经度值插入数据库

问题描述

1 个解决方案

解决方案1 1 2020-03-05 22:42:01

解决方案1
1 2020-03-05 22:42:01