如何修改 uib-typeahead 异步谷歌地图 api 示例以仅显示城市？答案

【问题标题】：How do I modify uib-typeahead async google maps api example to show only cities?如何修改 uib-typeahead 异步谷歌地图 api 示例以仅显示城市？
【发布时间】：2016-06-19 17:15:59
【问题描述】：

抱歉，如果这个答案已经在某个地方，但我查看了所有类似的问题并没有看到确切的问题。

我想简单地修改 UI-Bootstrap 精美的 uib-typeahead '异步结果' 示例以仅显示城市（包括州和国家/地区）。 http://angular-ui.github.io/bootstrap/#/typeahead

我想看看是否可以在不包含指向 google maps api 的链接的情况下执行此操作，而 uib-typeahead 也没有这样做。另外，我想看看是否可以在前端执行此操作，而不是使用带有开发人员密钥的后端，尽管如果这不起作用，那么我将默认使用该选项。

我试过像这样修改“params”对象：

params: {
     address: val,
     sensor: false,
     types: (cities) // also tried types: ('cities') and types: (regions)
}

是否可以在没有开发者密钥的情况下在前端执行此操作？

【问题讨论】：

标签： angularjs twitter-bootstrap google-maps angular-ui-bootstrap

【解决方案1】：

在指定的示例中，Geocoding 服务被使用，并且根据Google Maps Geocoding API Request Format 既不支持type 也不支持types。

由于reverse geocoding response 包含其他属性以及types 属性，您可以考虑在客户端过滤结果。以下示例演示了如何修改提供的示例以仅在结果中显示城市：

$scope.getLocation = function(val) {
    return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false 
      }
    }).then(function(response){
      var items = response.data.results.filter(function(item){
           return isCityType(item);
      });

      return items.map(function(item){
        return item.formatted_address;
      });

    });
  };

  var isCityType = function(item) {
       var result = item.types.filter(function(t){
          return t == "locality" ||  t == "administrative_area_level_3";
       });
       return result.length > 0;
  };

Modified plunker

【讨论】：