首页 文章

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

提问于
浏览
2

我想使用Google Places API或它的自动完成功能来查找单个区域中的位置,使用边界(从Google使用Maps API地理编码调用检索) .

自动完成API有一个在here中使用边界的示例,但似乎无法使用我的坐标或原始示例'as is'(仅替换了API密钥) .

所以:我的问题是,是否有可能提供一个边界框来放置API搜索以检索单个城镇内的地方?如果可能,自动完成API将更易于使用 .

1 回答

  • 0

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

    对于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 .

    希望这可以帮助

相关问题