Autocomplete google在mysql问题中放置自动完成条目_Autocomplete_Google Places Api

Autocomplete google在mysql问题中放置自动完成条目

autocomplete

Autocomplete google在mysql问题中放置自动完成条目,autocomplete,google-places-api,Autocomplete,Google Places Api,我希望在我的一个项目中使用GooglePlaceAutoComplete，但问题是我需要在mysql中将county、state和city的条目存储为不同的条目。i、 e当有人键入mum，结果显示为孟买（城市）、马哈拉施特拉邦（州）、印度（国家），那么所有这3个条目都应该作为不同的条目存储在mysql中。有可能做到这一点吗？请查看本页并欣赏 <!DOCTYPE HTML> <html> <head> <title>Place Autoc

我希望在我的一个项目中使用GooglePlaceAutoComplete，但问题是我需要在mysql中将county、state和city的条目存储为不同的条目。i、 e当有人键入mum，结果显示为孟买（城市）、马哈拉施特拉邦（州）、印度（国家），那么所有这3个条目都应该作为不同的条目存储在mysql中。有可能做到这一点吗？

请查看本页并欣赏

<!DOCTYPE HTML>
<html>
  <head>
    <title>Place Autocomplete Address and type</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=it"></script>



  </head>

  <body>

      <input id="autocomplete" placeholder="Enter your address"
             type="text"></input>
      <br>
      <br>
      <div id="divToPrint" style="clear: both; float: left; border:solid 1px black; height: 32px;"></div>
    <script>

        /* set a default Bounds */
        var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(52.207606672865225,  -0.9448242187499911),
          new google.maps.LatLng(52.464377026041284, -0.2746582031249841));

        /* get a input tag with id = autocomplete */
        var input = document.getElementById('autocomplete');

        /* set a options */
        var options = {
          bounds: defaultBounds,
          types: ['geocode'],

        };

        /* register a autocomplete object into a variable named autocomplete */
        var autocomplete = new google.maps.places.Autocomplete(input,  options);

        /* listen a place_changed event into variable autocomplete and do: */ 
        google.maps.event.addListener(autocomplete, 'place_changed', function() {

            /* reset a defaultBounds into variable */
            autocomplete.setBounds(defaultBounds);  

            /* get a response place */
            var place = autocomplete.getPlace();

            /* initilize the componentsTypePlace */
            var componentsTypePlace = "";

            /* get a div tag with id = divToPrint */
            var divToPrint = document.getElementById('divToPrint');

            /* get a legth of request address */
            var addressLengthplace = place.address_components.length;

            /* cycle into a adress_components */
            for(var i=0; i < addressLengthplace; i++){

                /*  get a value of address_component type */
                componentsTypePlace = place.address_components[i].types[0];

                /*  get a value of address_component array[i] */
                var val = place.address_components[i].long_name;

                /* insert into div a value of address component and its type */
                divToPrint.innerHTML += "//"+ componentsTypePlace + " : " + val +" //";

            }

        });
    </script>   

  </body>
</html>


放置自动完成的地址和类型




/*设置默认边界*/
var defaultBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（52.2076066672865225，-0.9448242187499911），
新的google.maps.LatLng（52.464377026041284，-0.2746582031249841）；
/*获取id为自动完成的输入标记*/
var input=document.getElementById（'autocomplete'）；
/*设置一个选项*/
变量选项={
界限：默认界限，
类型：['geocode']，
};
/*将自动完成对象注册到名为autocomplete的变量中*/
var autocomplete=new google.maps.places.autocomplete（输入，选项）；
/*将更改后的事件听成变量autocomplete并执行：**
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
/*将defaultBounds重置为变量*/
自动完成。设置边界（默认边界）；
/*得到回应*/
var place=autocomplete.getPlace（）；
/*初始化部件更换*/
var componentsTypePlace=“”；
/*获取id=divToPrint的div标记*/
var divToPrint=document.getElementById（'divToPrint'）；
/*获取请求地址的长度*/
var addressLengthplace=place.address\u components.length；
/*循环到adress_组件中*/
对于（变量i=0；i


var placeSearch，自动完成；
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区级别1:“长名称”，
国家：'long_name'，
邮政编码：“短名称”
};
函数初始化（）{
autocomplete=new google.maps.places.autocomplete(
/**@type{HTMLInputElement}*/（document.getElementById（'autocomplete'），
{类型：['geocode']}）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
//fillInAddress（）；
});
}


函数fillInAddress（）{
var-place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=''；
document.getElementById（组件）.disabled=false；
}
对于（变量i=0；i请包括你已经尝试做了什么，使这项工作-
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'long_name',
country: 'long_name',
postal_code: 'short_name'
};

function initialize() {
autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
 //fillInAddress();
  });
}

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

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;
}
}
}


function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
 });
 }
}
</script>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" value= <?php if(isset($location)): echo $location; else: echo '""'; endif; ?> name="data[Location][location]" class ="input-block-level" required ="required">
</div>
</body>