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

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

2 голосов
/ 09 июня 2011

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

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

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

1 Ответ

0 голосов
/ 22 июня 2011

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

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

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, если элемент находится за пределами границ.

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

...