如何将地图经度和纬度值传递到phpMyAdmin中的数据库

目标是拥有一张带有可移动标记的地图，点击"确认位置"按钮后，即可保存纬度和经度坐标。我似乎已经得到了带有可移动标记的地图，该标记可以获得指针的长度和纬度，但我不知道如何存储这些值并使用SQL将其传递到我的数据库。

请注意-在首页应该有一个谷歌地图链接，其中包括一个API键。此外-我正在使用这个链接的位置选择器-

<!DOCTYPE html>
<html>
<head>
<title>Tujjari</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/265b5bff8c.js"></script>
<script src="https://kit.fontawesome.com/420b921a12.js" crossorigin="anonymous"></script>
<!--Animate.css link1-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
<!--Animate.css link2-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Linking style.css-->
<link rel="stylesheet" type="text/css" href="tujjaricss.css?v=<?php echo time(); ?>">
<!--Bootstrap CDN's-->
<script src="https://unpkg.com/scrollreveal"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAMq_YJsJ75HOUWUAK3MyZp47vzdR7_Jv8"></script>
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
</head>
<body>
<div id="map" ></div>
<br>
<center>
<button id="confirmPosition" class="btn btn-secondary" formaction="congrats.php">Confirm Position</button></center>
<br><br>
</div>
<br><br>
<script>
// Get element references
var confirmBtn = document.getElementById('confirmPosition');
var longlat = document.getElementById('longlat');
var onIdlePositionView = document.getElementById('onIdlePositionView');

// Initialize locationPicker plugin
var lp = new locationPicker('map', {
setCurrentPosition: true, // You can omit this, defaults to true
}, {
zoom: 15 // You can set any google map options here, zoom defaults to 15
});

// Listen to button onclick event
confirmBtn.onclick = function () {
// Get current location and show it in HTML
var location = lp.getMarkerPosition();
console.log(location);
xmlhttp = new XMLHttpRequest();
xmlhttp.open("REQUEST", "ajax.php", "&location.lat=" + location.lat + "&location.lng=" + location.lng, true);
xmlhttp.send();
};
// Listen to map idle event, listening to idle event more accurate than listening to ondrag event
google.maps.event.addListener(lp.map, 'idle', function (event) {
// Get current location and show it in HTML
var location = lp.getMarkerPosition();
onIdlePositionView.innerHTML = 'The chosen location is ' + location.lat + ',' + location.lng;
console.log(location.lat)
});
</script>
<script>
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous">
</script>
</body>
<style type="text/css">
@media only screen and (max-width: 600px) {
.locu{
width: 40%;
}
.loca
{
margin-left: 75px;
}
.locus{
margin-left: 31px;
}
}
@media only screen and (min-width: 768px) {
.locu,.loca{
margin-left: 306px;
}
.locu{
width: 40%;
}
.locus{
margin-left: 262px !important;
width: 40%;
}
}
#map {
width: 100%;
height: 480px;
}
</style>

Ajax代码

<?php include("db/db.php");
if($_GET['confirm']){
print_r($_REQUEST);
$latitude = $_REQUEST['location.lat'];
$longitude = $_REQUEST['location.lng'];
$query = mysql_query("insert into location(latitude, longitude) values('$latitude', '$longitude')") or die(mysql_error());  
}
?>

您已经设法使映射工作，并且您还有一个向后端发送ajax请求的onclick事件；您所要做的就是实际插入值。ajax交互的问题如下：

您在这个调用中没有"confirm"参数：xmlhttp.open("REQUEST", "ajax.php", "&location.lat=" + location.lat + "&location.lng=" + location.lng, true);，这就是为什么您的ajax调用什么都不做的原因-您可以1(删除ajax文件中打开的if((，或者2(像location.lat和location.lng一样传递confirm参数
正如我在评论中所说，调试ajax文件的最佳方法是在ajax文件中使用var_dump()和print_r()函数；您可以在开发工具中监视ajax调用->"网络"选项卡(在Firefox和Chrome上为CTRL+Shift+I(。您可以点击每个单独的呼叫->单击"响应"选项卡，然后查看变量的转储。或者，您也可以使用onsuccess事件处理程序，这在jquery中相当容易：

$.ajax({
url: '/your/endpoint/here.php', //you can also append $_GET variables on the end of this, e.g. /your/endpoint/here.php?confirm=y&long=5&lat=5 - if you do this you do not need the data parameter also unless you know what you doing 
method: 'POST', //or 'GET', //this is also not required, defaults to GET
data: '', // this parameter can be missed out entirely, or you can manually build a string such as confirm=y&latitude=5&longitutde=5 OR you can use $('form').serialize() to get all input field values sent
success: function(data) {
console.log(data); //this will dump to the console the exact thing you would find in the Network tab and response 
}
});

您确实需要消除jQuery和其他include的所有重复。不仅没有理由包含多个版本，而且你也会让自己面临潜在的冲突，也会无故放慢页面速度。所有内容只包含一个版本
您的数据库驱动程序不是phpmyadmin，phpmyadmin是一个与驱动程序交互的接口，它通常运行MySQL或MariaDB
要了解如何将值实际插入数据库，请在此处查看此答案：https://stackoverflow.com/a/60496/7691338

相关内容

最新更新

热门标签：