2012-05-18 51 views

Respuesta

6

Puede configurar los Autocomplete opciones para utilizar geocode como el tipo, lo que restringirá los resultados que se devuelven a direcciones:

var input = document.getElementById('searchTextField'); 
var options = { 
    bounds: yourBounds, 
    types: ['geocode'] 
}; 

autocomplete = new google.maps.places.Autocomplete(input, options); 

No hay manera de restringir los resultados a sólo calles, pero esto logrará en gran medida lo que quiere. Si configura yourBounds correctamente, tal vez limitado al área de una ciudad, lo acercará lo más posible.

actualización de responder al comentario:

Si desea iniciar mediante la introducción de una ciudad, puede enlazar los límites del mapa a la Autocomplete s límites, que tendrá el conjunto de mapas de su ventana de forma automática cuando una ciudad se selecciona en el Autocomplete:

var options = { 
    bounds: yourBounds, 
    types: ['(cities)'] 
}; 
autocomplete = 
    new google.maps.places.Autocomplete(input, options); 
// This will bind the map's bounds to the Autocomplete's bounds: 
autocomplete.bindTo('bounds', map); 

a continuación, puede actualizar el tipo Autocomplete 's, similar a la anterior, de tener que volver direcciones:

autocomplete.setTypes([ "geocode" ]); 

A partir de ahí, puede leer el Places Library API Docs.

+0

Ok, pero en Google Maps si busco 'Nueva York' obtengo un mapa con la ciudad delimitada. ¿No es posible obtener esos límites? Gracias por su ayuda –

+0

He actualizado el contenido de mi respuesta en respuesta a su comentario. –

+0

Gracias, es lo que quiero. –

1

Estaba buscando una forma de restringir el Autocompletar de Places al nivel street_number pero no encontré ninguno.

La mejor solución que pude encontrar es comprobar el componente street_number en el resultado de lugares y presentar una notificación al usuario si faltara.

código Ejemplo:

var searchbox = document.getElementById('location'); 

var options = {    
    types: ['geocode'] 
}; 

autocomplete = new google.maps.places.Autocomplete(searchbox, options); 

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 

     var foundStreet = false; 

     for (var i = 0; i < place.address_components.length; i++) { 
      var c = place.address_components[i]; 

      for (var j = 0; j < c.types.length; j++) 
      { 
       if (c.types[j] == "street_number") 
       { 
        foundStreet = true; 
        break; 
       } 
      } 

      if (foundStreet) 
       break; 
     } 

     if (!foundStreet) 
      alert("Not a valid street number, add some pretty message to the user."); 

     console.log(place); 
    }); 
2

sólo un ejemplo de código html (3 Twitter arranque compatibles :))

<div class="well container"> 
    <form role="form"> 
     <div class="form-group"> 
     <label for="locality" class="sr-only">Stadt oder PLZ</label> 
      <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" /> 
      <p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben.</p> 
     </div> 
     <div class="form-group"> 
     <label for="route" class="sr-only">Straße/Hausnummer</label> 
     <div class="row"> 
      <div class="col-xs-6"> 
      <input type="text" class="form-control col-xs-8" id="route" name="route" placeholder="Straße" disabled="true" /> 
      </div> 
      <div class="col-xs-6"> 
      <input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." disabled="true" /> 
      </div> 
     </div> 
     </div> 
    </form> 
</div> 

Creo que el código se explica por sí, a modo de prueba

<script> 
var localityInput = document.getElementById('locality'); 
var localityOptions = { 
    types: ['geocode'], //['(cities)'], geocode to allow postal_code if you only want to allow cities then change this attribute 
    componentRestrictions: {country: 'de'} 
}; 
autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions); 

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    $('#route').attr('disabled', false).focus(); 
    $('#street_number').attr('disabled', false); 

    var boundsByCity = autocomplete.getPlace().geometry.viewport; 
    var routeInput = document.getElementById('route'); 
    var routeOptions = { 
     bounds: boundsByCity, 
     types: ['geocode'] 
    }; 
    new google.maps.places.Autocomplete(routeInput, routeOptions); 
}); 
</script> 

DEMO: JSFIDDLE

Another demo more advanced

2

tipos SET para regiones.

var input = document.getElementById('searchTextField'); 

var options = { 
    bounds: yourBounds, 
    types: ['(regions)'] 
}; 

autocomplete = new google.maps.places.Autocomplete(input, options); 

creo que sirve ..

Cuestiones relacionadas