Question

我正在尝试创建一个具有拾取/降落地址的地址框。 Like this one使用AngularJs。

我正在使用Google Autocomplete API，因此我可以自动填写，因为有人开始输入地址。

addressBoxView.html：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Pickup Address</label>
    <input type="input" class="form-control" id="autocomplete" placeholder="Enter Address Here" ng-focus="initAutocomplete()">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Dropoff Address</label>
    <input type="text" class="form-control" id="" placeholder="Enter Address Here">
  </div>
  <button type="submit" class="btn btn-default" id="submit">Submit</button>
</form>

addressBoxDirective.js：

angular.module('app.directives.addressBox', [])
  .directive('addressBox', function(){
    return {
      restrict: 'E',
      scope: {
        data: '='
      },
      templateUrl: 'shared/addressBox/addressboxview.html',
      controller: function($scope){

        $scope.initAutocomplete = function() {
          // Create the autocomplete object, restricting the search to geographical
          // location types.
          autocomplete = new google.maps.places.Autocomplete(
              /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
              {types: ['geocode']});

          // When the user selects an address from the dropdown, run the fillinAddress function which will do something
          autocomplete.addListener('place_changed', fillInAddress);
        }

        function fillInAddress(){
          console.log(autocomplete);
        }
      }
    };
  });

首先，当页面运行/加载时，我立即收到此错误。

Uncaught InvalidValueError: initAutocomplete is not a function

然后，当我专注于拾音器盒时，我也会收到此错误。

TypeError: Cannot read property 'Autocomplete' of undefined
    at Scope.$scope.initAutocomplete (http://play.uvgrade.com:9000/shared/addressBox/addressBoxDirective.js:14:48)
    at fn (eval at <anonymous> (http://play.uvgrade.com:9000/bower_components/angular/angular.js:14086:15), <anonymous>:4:239)
    at expensiveCheckFn (http://play.uvgrade.com:9000/bower_components/angular/angular.js:15076:18)
    at callback (http://play.uvgrade.com:9000/bower_components/angular/angular.js:24546:17)
    at Scope.$eval (http://play.uvgrade.com:9000/bower_components/angular/angular.js:16820:28)
    at Scope.$apply (http://play.uvgrade.com:9000/bower_components/angular/angular.js:16920:25)
    at HTMLInputElement.<anonymous> (http://play.uvgrade.com:9000/bower_components/angular/angular.js:24551:23)
    at HTMLInputElement.jQuery.event.dispatch (http://play.uvgrade.com:9000/bower_components/jquery/dist/jquery.js:4732:27)
    at HTMLInputElement.elemData.handle (http://play.uvgrade.com:9000/bower_components/jquery/dist/jquery.js:4544:28)

有时，无处不在，它将开始起作用。但它仍会在控制台上给我一个这样的错误：

InvalidValueError: not an instance of HTMLInputElement

但大部分时间它都不起作用。我不应该使用ng-focus调用该功能吗？我尝试将initAutocomplete函数放在不同的文件夹中并没有什么区别。

如果您有任何问题，请告诉我，或者您希望我的代码更多。请不要立即降级，只是询问和生病编辑。感谢

Answer 1

尝试使用Bootstrap-Angular方式，

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

未捕获的InvalidValueError：initAutocomplete不是函数

1 个答案: