Есть ли способ ограничить автозаполнение Google Адресов поиском по улицам города?

Question

Могу ли я ограничить поиск улицами города при использовании Google Адресов? Autocomplete?

Answer 1

Вы можете установить Autocomplete варианты использования geocode в качестве типа, который будет ограничивать результаты, возвращаемые по адресам:

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

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

Нет возможности ограничить результаты только улицах, но это во многом позволит достичь желаемого.Если вы установите yourBounds правильно, может быть, ограничено территорией города, это приблизит вас настолько близко, насколько это возможно на данный момент.

Обновление в ответ на комментарий:

Если вы хотите начать с ввода города, вы можете привязать границы карты к Autocompletes границы, благодаря которым область просмотра карты будет автоматически устанавливаться при выборе города в 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);

Затем вы можете обновить Autocompleteтипы, аналогичные приведенным выше, чтобы возвращать адреса:

autocomplete.setTypes( [ "geocode" ] );

Оттуда вы можете прочитать Документация по API библиотеки мест.

Answer 2

Просто пример HTML-кода (Twitter Bootstrap 3 совместимый:))

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

.

Я думаю, что код самоуверенно, просто попробуй это

<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

Другой демонстрация более Advanced

Answer 3

Установленные типы на <Сильные> регионы .

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

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

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

.

Надеюсь, это поможет ..

Answer 4

Я искал способ ограничить места AutoComplete к уровню street_number, но не нашел.

Лучшее решение, с которым я мог придумать, это проверить компонент street_number в результате результатов и представить уведомление пользователю, если он отсутствовал.

Пример код:

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

.