javascript - AngularJS - Google Place 自动完成 API key

Question

我刚开始使用 Google 的 API，一直在尝试了解如何使用 Angular 实现 Places Autocomplete API。一般来说，我从来没有真正使用过自动完成功能。我目前没有将 jQuery 库引入我的项目，但我相信我已经看到一些开发人员在带有 element.autocomplete 的指令中使用它。 .

我确实寻找了任何可能对此有帮助的现有指令，我发现:https://github.com/kuhnza/angular-google-places-autocomplete

根据文档进行设置后，我无法使其正常工作，而且我也没有看到我应该首先在哪里设置 API key 以使其正常运行。我认为主要错误与 API key 有关，但我并不肯定。

据我了解，Google 的文档提到将 API key 作为 key 包含在内拉地方库时的参数。如果我像指令文档中那样省略 key ，我会得到 MissingKeyMapError .如果我像谷歌说的那样添加 key ，我会得到 ApiNotActivatedMapError .同时，Google 还说我的 API key 是服务器 API key ，并且“此 key 应在您的服务器上保密”。

用于拉入我引用的库的行是:<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

使用我的 PHP 后端或仅在浏览器中执行 cURL 请求可为我提供结果。所以现在我只是想了解自动完成是如何工作的，以及我如何让它与 AngularJS 一起工作。

是的，我对整个主题有点困惑。如果有人能指出我正确的方向或指出我可能误解的地方，那将是一个很大的帮助!

Answer 1

您可以为特定域创建一个 Google API key ，这样您就可以确保没有其他人可以在他的页面等上使用它。

我还使用此 API 实现了 Google place 指令，我们需要 API key 才能获取 API SDK。

<script src="https://maps.googleapis.com/maps/api/js?libraries=places?key=your_key"></script>

这是指令代码。

angular.module('app')
  .directive('googlePlace', directiveFunction);

directiveFunction.$inject = ['$rootScope'];

function directiveFunction($rootScope) {
  return {
    require: 'ngModel',
    scope: {
      ngModel: '=',
      details: '=?'
    },
    link: function(scope, element, attrs, model) {
      var options = {
        types: [],
        componentRestrictions: {}
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

      google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
        scope.$apply(function() {
          scope.details = scope.gPlace.getPlace();
          model.$setViewValue(element.val());
          $rootScope.$broadcast('place_changed', scope.details);
        });
      });
    }
  };
}

你可以这样使用它

 <input type="text" google-place ng-model="venue.address_line_1" aria-label="search">

然后在 Controller 中，捕获 place_changed 事件。

$scope.$on('place_changed', function (e, place) {
     // do something with place
});