1

角型ヘッドの使用に問題があります

Google マップ API を使用してオートコンプリートを作成するために angular タイプヘッドを使用する例がここにあります。

私の問題は、タイプヘッド内の結果をクリックすると、モデルに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

目的の結果を得るには多くの方法がありますが、以下に 1 つの可能性を示します。しかし、ソリューションに飛び込む前に、先行入力は 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

于 2014-05-22T17:27:44.810 に答える