Question

如何仅限美国（国家/地区）的自动填充建议。到目前为止，这是我的代码，

<div class="search-result">
                    <form action="" method="post" class="clearfix">
                        <input type="text" placeholder="Enter City or Zip Code" class="searchBox" id="search-result" autocomplete="on">
                        <button type="submit" class="btn btn-brown"></button>
                    </form>
                    <div class="marker-list">
                        <ul>
                        </ul>
                    </div>
                </div>

以下是Javascript代码。请注意，有更多的代码，这适用于没有过滤美国的结果，

inputResult = document.getElementById("search-result"), 
    searchBoxResult = new google.maps.places.SearchBox(inputResult), 

searchBoxResult.addListener("places_changed", function () {

        // Clear old markers
        markers.forEach(function(place) {
            place.setMap(null);
        });
        markers = [];

        var 
            places = searchBoxResult.getPlaces(), 
            bounds = new google.maps.LatLngBounds(), 
            searchPlace = new google.maps.LatLng({lat: places[0].geometry.location.lat(), lng: places[0].geometry.location.lng()});

        $(".search-result form").submit();

        getPlacesList(searchPlace, customPlaces, searchRadius);

        var placesFilter = function (element) {
            return distance(element.LatLng, searchPlace) < searchRadius;
        };

        var j=0;
        customPlaces.forEach(function (place) {
            if(place.distance<=20){
                createMarker(place,j++);
            }
        });

        customPlacesFiltered = customPlaces.filter(placesFilter);

        customPlacesFiltered.forEach(function(place) {
            bounds.extend(place.LatLng);
        });

        map.fitBounds(bounds);
    });

我的api请求是，

<script src="https://maps.googleapis.com/maps/api/js?key=xxxx&libraries=places,geometry&callback=initMap&sensor=false&libraries=geometry,places&components=country:us&ext=.js" async defer></script>

如何使用此方法仅为美国限制重新排列。请帮忙。

Answer 1

对于限制搜索，

SearchBox提供的选项少于Autocomplete。在前者中，您可以将搜索偏向给定的LatLngBounds。在后者中，您可以将搜索范围限制在特定国家/地区和特定地点类型，以及设置边界。

var defaultBounds = new google.maps.LatLngBounds(
   new google.maps.LatLng(-33.8902, 151.1759), // LatLng of the north-east corner of US
   new google.maps.LatLng(-33.8474, 151.2631)  // LatLng of the south-west corner of US
);  

var input = document.getElementById('search-result');

var searchBox = new google.maps.places.SearchBox(input, { bounds: defaultBounds });

在Autocomplete我们有componentRestrictions

var options = { componentRestrictions: { country: 'us' } };
var input = document.getElementById('search-result');

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

Google地图自动完成按国家/地区使用边界

1 个答案: