gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:33:52 24 4
gpt4 key购买 nike

以下代码给出了设备的纬度和经度。

<!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。任何帮助将不胜感激。

最佳答案

由于新的安全标准,无法在此代码段中执行此操作,而应在启用了 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>

关于javascript - 将 HTML5 地理位置纬度和经度值插入数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60554547/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com