Question

我目前正在使用HTML格式发布到PHP文件中将输入数据转换为MYSQLi数据库（这完全是在一个本地主机）。我想使用地图，但允许用户指定事件地点更容易。我目前正在使用Google Maps API和文件results[0]中的变量geo.php（如下所示）是一个我想输入MYSQLi数据库。

我不知道如何去做这件事。我听说 AJAX当我尝试这个时它似乎没有用（可能是因为我对它完全不熟悉）。我是一个虽然我非常熟悉，但对Javascript完全陌生使用PHP / HTML / CSS。

提前致谢！

form.php的

<html>

<div id="form">
    <form action="post.php" class="js-ajax-php-json" method="post" >
                Event Title<br />
                <input type="text" name="title" placeholder="Title" >
                <br><br>
                Details<br>
                <textarea name="details" id="textarea" placeholder="Details" maxlength="10" cols="40" rows="10"></textarea>
                <br><br>
                <input type="submit" value="Send">
                <input type="reset" value="Reset">
    </form>
        <?php include 'includes/overall/geo.php' ?>
</div>

</html>

在此表单的末尾，请注意随附的Google Maps API地理编码器和地图

geo.php

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 70%;
        margin: 0;
        padding: 0;
      }

      #panel {
        position: absolute;
        top: 330px;
        left: 26%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

      #panel, .panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #panel select, #panel input, .panel select, .panel input {
        font-size: 15px;
      }

      #panel select, .panel select {
        width: 100%;
      }

      #panel i, .panel i {
        font-size: 12px;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
    var geocoder;
    var map;
    function initialize() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = {
        zoom: 9,
        center: latlng
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location

          });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

post.php中

<?php

  $title = $_POST["title"];
  $details = $_POST["details"];

  //I WISH TO GET THE LOCATION (address[0]) FROM geo.php 
  //AND INPUT IT INTO MYSQLi HERE

include 'core/con.php';//Connects to the database

$errors = array();

if(mysqli_query($conn,"INSERT INTO events (`title`, `details`, `location`) VALUES ('$title', '$details', '$location')")) {
    header("Location: url/form.php");
    die();

} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>

我一直坚持如何做这件事并且非常感谢任何帮助！

Answer 1

一个简单的方法是这样的，使用javascript来改变某个输入的值

只需在表单示例中添加隐藏的输入：<input id="geocode" type="hidden" name="geocode" />

然后您在codeAddress()函数中添加一行，您必须添加一行，您可以在其中更改隐藏输入的值

function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location

  });
   //SEE HEREEEEE
   document.getElementById('geocode').value = marker.results[0].geometry.location; //this is how you manipulate the value of the hidden input
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }

并在您的PHP中，只需访问帖子值

$_POST['geocode']

从Javascript输入变量到Mysqli数据库

1 个答案: