Question

我在使用角度打字机时遇到问题

有一个示例here使用角度类型头来使用Google maps API创建自动完成功能。

我的问题是，当我点击打字机中的结果时，我的模型会填充item.formatted_address数据。如何单击格式化的地址，然后填充纬度/经度数据

// Any function returning a promise object can be used to load values asynchronously   
$scope.getLocation = function(val) {
  return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
    params: {
      address: val,
      sensor: false
    }
  }).then(function(res){
    var addresses = [];
    angular.forEach(res.data.results, function(item){
      addresses.push(item.formatted_address);
    });
    return addresses;
  });   };

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

Answer 1

有许多方法可以达到预期的效果，下面我介绍了其中一种可能性。但在深入研究解决方案之前，请注意，typeahead使用与AngularJS内置select指令类似的语法，因此您可以在typeahead属性的所有部分中使用表达式。鉴于此，你可以写：

typeahead="address as address.formatted_address for address in getLocation($viewValue)"

并将您的XHR成功回调更改为：

.then(function(response){
      return response.data.results.map(function(item){
        return {
          location: item.geometry.location,
          formatted_address: item.formatted_address
        }
      });

这是一个有效的插件：http://plnkr.co/edit/4PwaFaeIOeIDRCsvuidn?p=preview

Answer 2

这是Google地图API返回的商品模型的一部分：

Model: {
  "address_components": [
//Not useful here   
[...]
    }
  ],
  "formatted_address": "E, Santiago de Cuba, Cuba",
  "geometry": {
    "bounds": {
      "northeast": {
        "lat": 20.0076143,
        "lng": -75.8325446
      },
      "southwest": {
        "lat": 20.0069908,
        "lng": -75.8372035
      }
    },
    "location": {
      "lat": 20.007418,
      "lng": -75.8349013
    },
    "location_type": "GEOMETRIC_CENTER",
    "viewport": {
      "northeast": {
        "lat": 20.00865153029151,
        "lng": -75.8325446
      },
      "southwest": {
        "lat": 20.0059535697085,
        "lng": -75.8372035
      }
    }
  },
  "types": [
    "route"
  ]
}

如您所见，在他们的示例中，angular-ui选择item.formatted_adress

您需要纬度和经度信息，因此这将是item.location。

从typeahead直接获取它将涉及操纵JSON并找到正确的数据结构，因此您可能希望首先让用户选择文档示例中存在的位置，然后向maps API询问有关的详细信息。该特定位置，从而检索位置数据。

Angular Typeahead（ui.bootstrap.typeahead） - 获取纬度/经度

2 个答案: