Можно ли добавить ограничивающий прямоугольник в API RESTful Google Places?

Question

Я хотел бы использовать Google Places API или функцию автозаполнения, чтобы находить места в одном районе, используя границы (полученные из Google с помощью вызова геокодирования API Карт).

У API автозаполнения есть пример использования границ здесь, но это, кажется, не работает, используя мои координаты или оригинальный пример "как есть" (только замененный ключ API).

Итак: мой вопрос заключается в том, можно ли предоставить ограничивающую рамку для поиска по API мест для поиска мест внутри одного города? Если возможно, API автозаполнения будет лучше использовать.

Answer 1

Я столкнулся с той же проблемой и решил ее с помощью функции обратного вызова во время отправки. Это не идеально, так как он по-прежнему позволяет пользователям выбирать недействительные места, но затем я проверяю во время отправки. Было бы хорошо, если бы они предоставили обратный вызов для функции автозаполнения (возможно, они делают, и я просто не вижу этого).

Для удобства у меня есть довольно простая форма, которая ищет места назначения по городам:

Choose a City: [ San Francisco ]
Choose a Destination: [ Autocomplete Google Places API textbox  ]
[Submit Button]

Сначала я настраиваю свой список выбора города (здесь я использую ASP.NET MVC, но вы поняли):

<select id="citySelectId" title="Select a city">
    @foreach (var city in Model.AvailableCities)
    { 
        <option value="@city.CityId"
                data-ne-latitude="@city.NorthEastPos.Latitude" 
                data-ne-longitude="@city.NorthEastPos.Longitude" 
                data-sw-latitude="@city.SouthWestPos.Latitude" 
                data-sw-longitude="@city.SouthWestPos.Longitude" 
                @(Model.SelectedSearchCityId == @city.CityId ? "SELECTED" : string.Empty)>@city.CityState</option>
    }
</select>

Затем я устанавливаю изменение jquery в списке выбора города, чтобы обновить автозаполнение:

$("#citySelectId").change(onSelectChange);

Вызов onSelectChange довольно прост:

function onSelectChange() {
    $('#destinationInputId').val("");

    var selected = $("#citySelectId option:selected");
    var nelat = selected[0].getAttribute('data-ne-latitude');
    var nelng = selected[0].getAttribute('data-ne-longitude');
    var swlat = selected[0].getAttribute('data-sw-latitude');
    var swlng = selected[0].getAttribute('data-sw-longitude');

    var cityLatLngBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(swlat, swlng),
        new google.maps.LatLng(nelat, nelng)
    );

    if (autocomplete == undefined) {
        autocomplete = new google.maps.places.Autocomplete(destinationInput, { bounds: cityLatLngBounds });
    } else {
        autocomplete.setBounds(cityLatLngBounds)
    }

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        if (!inCityBounds(place.geometry.location.lat(), place.geometry.location.lng())) {
            popError("The destination you selected (" + place.name + ") does not fall within the city bounds");
        }
    });
};

И inCityBounds действительно прост:

function inCityBounds(lat, long) {
    var selected = $("#citySelectId option:selected");
    var nelat = selected[0].getAttribute('data-ne-latitude');
    var nelng = selected[0].getAttribute('data-ne-longitude');
    var swlat = selected[0].getAttribute('data-sw-latitude');
    var swlng = selected[0].getAttribute('data-sw-longitude');

    var cityLatLngBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(swlat, swlng),
        new google.maps.LatLng(nelat, nelng)
    );

    var destination = new google.maps.LatLng(lat, long);

    return cityLatLngBounds.contains(destination);
};

Функция popError() просто показывает сообщение об ошибке:

$('#errorSpanId').html(errorMsg).show();

А затем мой код проверки / отправки снова проверяет его и возвращает false, если элемент находится за пределами границ.

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