Вставка HTML5 значений местоположения и долготы географического местоположения в базу данных - PullRequest
Новая
       1

Вставка HTML5 значений местоположения и долготы географического местоположения в базу данных

0 голосов
/ 06 марта 2020

Следующий код дает мне широту и долготу устройства. 

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

Я хочу вставить их в базу данных при загрузке страницы, но не знаю, как это сделать. 

$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();

Я не уверен, как получить значение широты и долготы от javascript до $lat и $long при загрузке страницы. Любая помощь будет оценена.

1 Ответ

1 голос
/ 06 марта 2020

Из-за новых стандартов безопасности это не может быть выполнено в этом фрагменте и должно работать на размещенной странице с включенным SSL (HTTPS). Тайм-аут, добавленный в функцию, будет полезен для ожидания большей точности 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...