Question

我很擅长使用Google的API，并且一直试图弄清楚如何使用Angular实现Places Autocomplete API。我从来没有真正使用自动完成功能。我目前没有将jQuery库引入我的项目，但我相信我已经看到一些开发人员使用element.autocomplete在指令中使用它。

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

根据文档设置后，我还没有能够让它工作，我也没有看到我在哪里设置API密钥才能使它在第一个工作地点。我认为主要错误与API密钥有关，但我并不积极。

根据我的理解，Google的文档提到在拉取场所库时将API密钥包含为key参数。如果我省略了指令文档中的密钥，我会得到MissingKeyMapError。如果我像谷歌一样添加密钥，我会得到ApiNotActivatedMapError。与此同时，谷歌还说我的API密钥是一个服务器API密钥，并且＆＃34;这个密钥应该在你的服务器上保密＃34;。

我所引用的图书馆的引入线是：<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

使用我的PHP后端或仅在浏览器中执行cURL请求可以为我提供结果。所以现在我只想了解Autocomplete如何工作以及如何使用AngularJS。

所以是的，我对这个话题感到有些困惑。如果有人能指出我正确的方向或指出我可能会误解，那将是一个很大的帮助！

Answer 1

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

我还使用此api来表达Google place指令，我们需要API密钥来获取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">

然后在控制器中捕获place_changed事件。

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

Answer 2

你可以在脚本中传递api密钥作为params

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

之后如果您看到此错误ApiNotActivatedMapError，则表示您需要在google开发者控制台中激活服务Google地方

https://console.developers.google.com

在API Google地图下点击“更多”，您应该看到Google Places API Web Service点击它并激活。

希望这会有所帮助

AngularJS - Google Place自动填充API密钥

2 个答案: