在数据库上发布 long 和 lat

Question

我当前的代码有一些问题。

我无法从地址文本字段接收经度和纬度的结果。一旦我收到我想将经度和纬度放入我的数据库。我不确定这是否可能，因为它正在检查的值（地址）在表单标签中。

任何意见都会有所帮助...谢谢

function initialize() {
  var address = (document.getElementById('address'));
  var autocomplete = new google.maps.places.Autocomplete(address);
  autocomplete.setTypes(['geocode']);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }
  });
}

function codeAddress() {
  geocoder = new google.maps.Geocoder();
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      alert("Latitude: " + results[0].geometry.location.lat() + "Longitude: " + results[0].geometry.location.lng());
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<form method="post" action="formconnect.php" ;>

  <h2>Add new location</h2>
  <p>Please add your company information within this form</p>


  Name:
  <input type="text" name="name">
  <br>Hours:
  <input type="text" name="hours">
  <br>Baseball:
  <select name="baseball">
    <option value="" selected="selected"></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="Coming Soon">Coming Soon</option>
  </select>
  <br>Basketball:
  <select name="basketball">
    <option value="" selected="selected"></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="Coming Soon">Coming Soon</option>
  </select>
  <br>Hockey:
  <select name="hockey">
    <option value="" selected="selected"></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="Coming Soon">Coming Soon</option>
  </select>
  <br>Golf:
  <select name="golf">
    <option value="" selected="selected"></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="Coming Soon">Coming Soon</option>
  </select>
  <br>Soccer:
  <select name="soccer">
    <option value="" selected="selected"></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="Coming Soon">Coming Soon</option>
  </select>
  <br>Address:
  <input type="text" name="address">
  <br>
  <input type='hidden' value='' name='lat' />
  <input type='hidden' value='' name='lng' />
  </br>
  </br>

  <input onClick="codeAddress()" type="submit"></input>



</form>

这里也是formconnect.php

$sql="INSERT INTO markers (name, hours, baseball, basketball, hockey, golf, soccer, address, lat, lng)
VALUES
('$_POST[name]','$_POST[hours]','$_POST[baseball]','$_POST[basketball]','$_POST[hockey]','$_POST[golf]','$_POST[soccer]','$_POST[address]','$_POST[lat]','$_POST[lng]')";

if (!mysqli_query($con,$sql))
{
    die('Error: ' . mysqli_error($con));
}
echo "one record added";
mysqli_close($con);

Answer 1

您的代码中有一些细微的错误

1. 您没有指定为经度和纬度字段指定值的代码。我知道您正在从 google 获取值，但是您无法将这些值传递给您的字段。我们会看看我们能做些什么。

在您的 html 中，为您想要通过 getElementById() 引用的每个字段提供 id，包括表单本身。像这样（我省略了其他字段，因为它们不受影响），

    <form method="post" action="formconnect.php" id="form1">
    .
    .
    .
    <input type="text" name="address" id="address" />

   <input type='hidden' value='' name='lat' id="lat" />

   <input type='hidden' value='' name='lng' id="lng" />

让我们把提交按钮也改成标记这与这里的问题无关。只是为了像这样的html5，

    <button onClick="codeAddress()" type="button" name="upload" >SUBMIT</button>

将按钮的类型更改为“按钮”而不是“提交”可确保在您在代码中执行此操作之前不会提交表单。

现在是 JS，

    <script>

    var codeAddress = function () {

    geocoder = new google.maps.Geocoder();

    var address = document.getElementById("address").value;

    geocoder.geocode(
        {'address': address}, 

        function (results, status) {

           if (status == google.maps.GeocoderStatus.OK) {

               document.getElementById("lat").value = results[0].geometry.location.lat();

               document.getElementById("lng").value = results[0].geometry.location.lng();

               document.getElementById("form1").submit();

          }else{

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

    </script>

请注意，为纬度和经度字段提供值的代码已移至回调中，特别是当结果为“OK”时。表单提交也被移到那里，以确保只有当谷歌的响应是“OK”时才会提交表单

1. 我再次猜测另一个函数“初始化”实现了自动完成。我改变了你叫它的地方。我只是立即调用它，它是这样创建的，

      var initialize = function() {
   
          var address = (document.getElementById('address'));
   
          var autocomplete = new google.maps.places.Autocomplete(address);
   
          autocomplete.setTypes(['geocode']);
   
          google.maps.event.addListener(autocomplete, 'place_changed', function() {
   
             var place = autocomplete.getPlace();
   
             if (!place.geometry) {
               return;
             }
   
             var address = '';
   
             if (place.address_components) { address = [
                (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
               ].join(' ');
             }
          });
     }();
   

注意到函数末尾的 () 运算符了吗？这就是在声明后立即调用它。试试这个，让我们看看情况如何。

Answer 2

用按钮替换提交类型输入

<button onClick="codeAddress()">submit</button>

为您的表单命名

<form method="post" action="formconnect.php" name="form1">

提供隐藏的输入 ID

<input type='hidden' value='' name='lat' id='lat'>
<input type='hidden' value='' name='lng' id='lng'>

使用你的函数设置隐藏值的值并提交表单

function codeAddress() {
    geocoder = new google.maps.Geocoder();
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat();
            var lng = results[0].geometry.location.lng();

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

    alert("Latitude: " + results[0].geometry.location.lat() + "Longitude: " + results[0].geometry.location.lng());
    document.getElementById("lat").value = lat;
    document.getElementById("lng").value = lng;
    document.getElementById("form1").submit();
}