Question

我希望使用谷歌地方自动完成我的项目之一，但问题是我需要将县，州和城市的条目存储为mysql中的不同条目。即当有人输入妈妈并且结果显示为孟买（市），马哈拉施特拉邦（州），印度（国家）时，则所有这三个条目都应存储为mysql中的不同条目。有可能这样做吗？

Answer 1

请参阅此页并享受。

<!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>

Answer 2

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

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>

谷歌在mysql问题中放置自动完成条目

2 个答案: