AngularJS

Question

我刚开始使用 Google 的 API，并且一直在尝试弄清楚如何使用 Angular 实现地点自动完成 API。一般来说，我从来没有真正使用过自动完成功能。目前我的项目中没有 jQuery 库，但我相信我已经看到一些开发人员在 element.autocomplete.

指令中使用它

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

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

据我了解，Google 的文档提到在拉取 places 库时将 API 键作为 key 参数包含在内。如果我像指令文档中那样省略密钥，我会得到 MissingKeyMapError。如果我像 Google 说的那样添加密钥，我会得到 ApiNotActivatedMapError。同时Google也说我的API密钥是服务器API密钥，"This key should be kept secret on your server".

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

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

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

Answer 1

您可以在脚本的此处将 api 密钥作为参数传递

 <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 单击它并激活。

希望这对您有所帮助

Answer 2

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

我还使用这个 api 实现了 Google 放置指令，我们需要 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
});

AngularJS - Google 放置自动完成 API 键

AngularJS - Google Place Autocomplete API Key

javascript

jquery

autocomplete

google-places-api