1

我在使用角字头时遇到问题

这里有一个例子，它使用 angular typehead 使用 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>
4

2 回答 2

4

有很多方法可以达到预期的效果，下面我将介绍其中一种可能性。但在深入研究解决方案之前，重要的是要注意 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
        }
      });

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

于 2014-05-22T17:27:44.810 回答
0

这是 google map 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 有关该特定位置的更多详细信息，从而检索位置数据。

于 2014-05-22T16:40:00.623 回答