AngularJS-Google Place自动完成API密钥

kenshin9 发表于 Dev

kenshin9

我是使用Google API的新手，并且一直在尝试弄清楚如何使用Angular实现Places Autocomplete API。总的来说，我从来没有真正使用过自动完成功能。目前，我还没有将jQuery库放入我的项目中，但我相信我已经看到一些开发人员在指令内部使用了jQuery库element.autocomplete。

我确实在寻找可能有助于解决此问题的任何现有指令，并且发现：https : //github.com/kuhnza/angular-google-places-autocomplete

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

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

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

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

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

佐伊卜·伊亚兹（Zohaib Ijaz）

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

我还使用此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
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章