2013-07-26 33 views
0

我希望使用谷歌地方自動填充我的項目之一,但問題是,我需要存儲縣,州和城市作爲不同的條目在MySQL中的條目。即當某個類型的媽媽和結果顯示爲孟買(城市),馬哈拉施特拉邦(州),印度(國家)時,那麼所有這3項應該作爲不同的條目存儲在mysql中。是否有可能做到這一點 ?谷歌地方在MySQL問題的自動完成條目

+0

請包括你已經嘗試過這樣做,使這項工作 - http://stackoverflow.com/help/how-to-問 – Michal

回答

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

功能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> 
相關問題