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

【问题标题】：How do I pass the map longitude and latitude values to my database in phpMyAdmin?如何将地图经度和纬度值传递到 phpMyAdmin 中的数据库？
【发布时间】：2020-12-07 19:51:37
【问题描述】：

我们的目标是制作一张带有可移动标记的地图，一旦点击“确认位置”按钮，就会保存纬度和经度坐标。我似乎已经得到了带有可移动标记的地图，该标记得到指针的长和纬度，但我不知道如何存储这些值并使用 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 请求（尽管为了清楚起见，我认为您应该省略 get 变量中的点），所以您需要做的就是实现对数据库的插入。您可以在 ajax.php 中对 longitutde 执行 $_REQUEST['location.lat']（或任何您更改的内容）和同样的操作，清理您的输入并简单地插入到您的数据库中。
问题是，我不知道如何将 location.lat 值传递给我在数据库中的表...好的，我会尝试一下
首先，您应该确保这些值位于您的ajax.php 文件中。一个非常简单的判断方法是在 ajax 文件中执行 print_r($_REQUEST);，并监视开发工具的 Network 选项卡。当您通过按下按钮发送 ajax 请求时，您将看到此 ajax 文件显示在此选项卡中；单击“响应”并确保值在那里。然后查看PDO (php.net/manual/en/book.pdo.php)。解释如何插入数据库超出了问题的范围，因为它太宽泛了，但是如果您有难以理解的细节，请随时回来。
嘿，我已经更新了代码。甚至放了ajax代码。我实际上不是这方面的专业人士，只是在学习。我通常使用 php 将值插入到表中。但是在这里我无法将 location.lat 值传递给我的 php，所以这很难。请检查 ajax 代码并让我知道要更改的内容。谢谢！
请停止使用这个古老、不安全且已弃用的 API，了解 sql 注入以及准备和绑定查询的重要性

标签： javascript php html css mysql

【解决方案1】：

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

您在此调用中没有“确认”参数：xmlhttp.open("REQUEST", "ajax.php", "&location.lat=" + location.lat + "&location.lng=" + location.lng, true); 这就是为什么您的 ajax 调用没有执行任何操作 - 您可以 1) 删除 ajax 文件中的开头 if()，或 2) 通过confirm 参数与 location.lat 和 location.lng 一样。
就像我在 cmets 中所说，调试 ajax 文件的最佳选择是在 ajax 文件中使用var_dump() 和print_r() 函数in；您可以在开发工具 -> 网络选项卡（Firefox 和 Chrome 上的 CTRL + Shift + I）中监控 ajax 调用。您可以单击每个单独的调用 -> 单击响应选项卡并查看变量的转储。或者，您也可以使用 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 和其他包含的所有重复项。不仅没有理由包含多个版本，而且您还会让自己面临潜在的冲突，并且还会无缘无故地减慢您的页面速度。仅包含一个版本的所有内容。
您的数据库驱动程序不是 phpmyadmin，phpmyadmin 是与驱动程序交互的接口 - 它通常运行 MySQL 或 MariaDB。
要了解如何将值实际插入数据库，请在此处查看此答案：https://stackoverflow.com/a/60496/7691338

【讨论】：