Javascript 谷歌自动将地址填入表格_Javascript_Php_Html_Forms_Google Maps

Javascript 谷歌自动将地址填入表格

javascript php html forms google-maps

Javascript 谷歌自动将地址填入表格,javascript,php,html,forms,google-maps,Javascript,Php,Html,Forms,Google Maps,我发现了许多自动填充地址代码，但我想在其中添加一个Post函数，以便将找到的数据发布到PHP页面有人可以帮助使用javascript或HTML代码来实现这一点吗 HTML代码 <!DOCTYPE html> <html> <head> <title>Auto-Complete Address Form</title> <link href="https://maxcdn.bootstrapcdn.com/bootstr

我发现了许多自动填充地址代码，但我想在其中添加一个Post函数，以便将找到的数据发布到PHP页面

有人可以帮助使用javascript或HTML代码来实现这一点吗

HTML代码

<!DOCTYPE html>
<html>
<head>
<title>Auto-Complete Address Form</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style>
    .container {
      margin-top: 20px;
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
    <script src="auto-complete.js" type="text/javascript" ></script>

</head>
<body>

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Address</h3>
        </div>
        <div class="panel-body">
            <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
            <br>
            <div id="address">
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">Street address</label>
                        <input class="form-control" id="street_number" disabled="true">
                    </div>
                    <div class="col-md-6">
                        <label class="control-label">Route</label>
                        <input class="form-control" id="route" disabled="true">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">City</label>
                        <input class="form-control field" id="locality" disabled="true">
                    </div>
                    <div class="col-md-6"> 
                        <label class="control-label">State</label>
                        <input class="form-control" id="administrative_area_level_1" disabled="true">
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-6">
                        <label class="control-label">Zip code</label>
                        <input class="form-control" id="postal_code" disabled="true">
                     </div>
                     <div class="col-md-6">
                        <label class="control-label">Country</label>
                        <input class="form-control" id="country" disabled="true">
                     </div>
                </div>
           </div>
        </div>
    </div>
</div>  

<!-- Note Add Your API Key Below -->
<!-- The Form Will Not Work Without a Registered API Key -->
<!-- https://developers.google.com/maps/documentation/javascript/get-api-key -->

<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

</body>
</html>


自动填写地址表
.集装箱{
边缘顶部：20px；
}
地址


街道地址
路线
城市
陈述
邮政编码
国家

下面是从GoogleAPI获取自动地址位置的Javascript

Javascript

var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }

var placeSearch，自动完成；
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”
};
函数initAutocomplete（）{
//创建自动完成对象，将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{！HTMLInputElement}*/（document.getElementById（'autocomplete'），
{类型：['geocode']}）；
//当用户从下拉列表中选择地址时，填充该地址
//表单中的字段。
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
函数fillInAddress（）{
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=''；
document.getElementById（组件）.disabled=false；
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于（变量i=0；i


我所需要做的就是找到如何将表单帖子添加到其中，并将其发送到PHP页面，以进行标准的$_Post['field']数据收集。
您可以使用ajax将数据发送到表单中
html:

自动填写地址表
.集装箱{
边缘顶部：20px；
}
地址


街道地址
路线
城市
陈述
邮政编码
国家
发送

Java脚本：
  var placeSearch, autocomplete;
          var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            country: 'long_name',
            postal_code: 'short_name'
          };
    function SendData() { 
      $.ajax({
        url: "yourfile.php",
        type: "post",
        data: componentForm,

        success: function(){ // trigger when request was successfull
        window.location.href = 'somewhere'
        },
    error: anyFunction // when error happened
        complete: otherFunction // when request is completed -no matter if the error or not
        // callbacks are of course not mandatory
        })
};
      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }

var placeSearch，自动完成；
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”
};
函数SendData（）{
$.ajax({
url:“yourfile.php”，
类型：“post”，
数据：组件形式，
成功：函数（）{//请求成功时触发
window.location.href=“某处”
},
错误：anyFunction//发生错误时
complete:otherFunction//请求完成时-无论是否出错
//回调当然不是强制性的
})
};
函数initAutocomplete（）{
//创建自动完成对象，将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{！HTMLInputElement}*/（document.getElementById（'autocomplete'），
{类型：['geocode']}）；
//当用户从下拉列表中选择地址时，填充该地址
//表单中的字段。
自动完成添加
  var placeSearch, autocomplete;
          var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            country: 'long_name',
            postal_code: 'short_name'
          };
    function SendData() { 
      $.ajax({
        url: "yourfile.php",
        type: "post",
        data: componentForm,

        success: function(){ // trigger when request was successfull
        window.location.href = 'somewhere'
        },
    error: anyFunction // when error happened
        complete: otherFunction // when request is completed -no matter if the error or not
        // callbacks are of course not mandatory
        })
};
      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }