Вопрос по jquery, google-maps-api-3 – Есть ли способ ограничить автозаполнение Google Мест для поиска улиц города?

11

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

Добавив название города к адресу? dezso

Ваш Ответ

4   ответа
3

Пример html-кода (совместим с загрузчиком Twitter 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>

ДЕМО: JSFIDDLE

Еще одна более продвинутая демоверсия

3

Установить типы в Регионы.

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

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

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

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

2

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

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

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

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

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

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

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

Хороший ответ, хотя я думаю, что типами для городов должно быть ['(города)']. Dwight Gunning
Хорошо, но в Картах Google, если я ищу «Нью-Йорк», я получаю карту с разделенным городом. Не возможно получить эти границы? Спасибо за помощ Il Recapito Espresso
Я обновил содержание моего ответа в ответ на ваш комментарий. Sean Mickey
Спасибо, это то, что я хочу. Il Recapito Espresso
Да, я забыл включить круглые скобки; Я обновил пример кода, чтобы быть правильным. Благодарность Sean Mickey

Похожие вопросы