將角度谷歌地圖搜索框過濾爲某個地方或半徑

我正在嘗試使用angular-google-maps搜索框創建過濾器。將角度谷歌地圖搜索框過濾爲某個地方或半徑

眼下，它會顯示每一個地方可能的，但我想它想只搜索城市Puerto Rico

我的代碼是從這個example相似。

HTML：

<div class="row" style="margin-top: 15px;"> 
    <div class="col s12"> 
    <div id="map_canvas"> 
     <div id="searchbox"> 
     <label>Enter an address: </label> 
     </div> 
     <script type="text/ng-template" id="searchbox.tpl.html"> 
     <input type="text" placeholder="Search Box"> 
     </script> 
    </div> 
    </div> 
    <div class="col s12"> 
    <!-- JUST ONE MARKER --> 
    <ui-gmap-google-map 
    center="pickUp || map.center" 
    events="map.events" 
    zoom="map.zoom"> 
     <ui-gmap-search-box 
     parentdiv="'searchbox'" 
     template="searchbox.template" 
     events="searchbox.events"></ui-gmap-search-box> 
     <ui-gmap-marker 
     coords="pickUp" 
     options="marker.options" 
     events="marker.events" 
     fit="true" 
     idKey="0"></ui-gmap-marker> 
    </ui-gmap-google-map> 
    </div> 
</div>

而這裏的控制器：

// SET MAP POSITION AND MARKER WHEN SEARCHING 
var events = { 
    places_changed: function (searchBox) { 
    var place = searchBox.getPlaces()[0]; 
    console.log(place.geometry.location.lat()); 
    var lat = place.geometry.location.lat(),lon = place.geometry.location.lng(); 
    $scope.setLocation(lat, lon); 
    $scope.map.center = { 
     latitude: lat, 
     longitude: lon 
    }; 
    } 
} 
$scope.searchbox = { template:'searchbox.tpl.html', events:events};

而且配置吧：

.config(function ($stateProvider, uiGmapGoogleMapApiProvider) { 
    'ngInject'; 

    uiGmapGoogleMapApiProvider.configure({ 
    // key: 'your api key', 
    v: '3.20', //defaults to latest 3.X anyhow 
    libraries: 'places' // Required for SearchBox. 
    }); 
})

問題

如何使角度谷歌地圖的搜索框只顯示波多黎各的地方？

謝謝！

來源

2016-06-14 Johhan Santana

使用componentRestrictions選項將自動填充搜索限制在Set biases and search-area boundaries for Autocomplete中提到的特定國家/地區。

示例代碼，限制內法國結果城市：

var input = document.getElementById('searchTextField'); 
var options = { 
    types: ['(cities)'], 
    componentRestrictions: {country: 'fr'} 
}; 

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

然後，add SearchBox for autocompleting search terms。如上所述：

您可以將SearchBox附加到文本字段，並且在輸入文本時，服務將以下拉選擇列表的形式返回預測結果。

有關地址和搜索條件自動完成的更多詳細信息和示例可以在文檔中找到。

而且，除此之外，您也可以使用此SO後 - How to limit google autocomplete results to City and Country only作爲參考。

來源

2016-06-15 16:43:51 Teyam

將角度谷歌地圖搜索框過濾爲某個地方或半徑

回答

相關問題