Question

我想使用Google Places API或它的自动填充功能，使用边界（使用Google地理API编码调用从Google检索）在单个地区中查找地点。

自动完成API有一个使用here中的边界的示例，但似乎无法使用我的坐标或原始示例“按原样”（仅替换了API密钥）。

所以：我的问题是，是否有可能提供一个边界框来放置API搜索以检索单个城镇内的地方？如果可能，自动完成API将更适合使用。

Answer 1

我遇到了同样的问题，并在提交期间使用回调函数解决了它。这并不理想，因为它仍然允许用户选择无效的地方，但随后我在提交期间进行验证。如果他们在自动完成功能上提供回调（可能他们这样做，而我只是看不到它）会很好。

对于insance，我有一个非常简单的表单，可以根据城市搜索目的地：

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。

希望这有帮助

是否可以为RESTful Google Places API提供边界框？

1 个答案: