AngularJS – Google Place自动填充API密钥
我是使用Google API的新手，并一直试图找出如何使用Angular实现Places Autocomplete API。 我从来没有真正使用自动完成function。 我目前没有将jQuery库引入我的项目，但我相信我已经看到一些开发人员在使用element.autocomplete的指令中使用它。
我确实找到了可能有用的任何现有指令，我发现： https ： //github.com/kuhnza/angular-google-places-autocomplete
根据文档设置后，我无法让它工作，我也没有看到我在哪里设置API密钥以使其首先运行。 我认为主要错误与API密钥有关，但我并不积极。
根据我的理解，Google的文档提到在拉取场所库时将API密钥作为key参数包含在内。 如果我在指令的文档中省略了键，我会得到MissingKeyMapError 。 如果我像Google所说的那样添加密钥，我会得到ApiNotActivatedMapError 。 与此同时，Google还说我的API密钥是服务器API密钥，并且“此密钥应该在您的服务器上保密”。
拉入我引用的库的行是：
使用我的PHP后端或仅在浏览器中执行cURL请求可以为我提供结果。 所以现在我只想了解Autocomplete如何工作以及如何使用AngularJS。
所以，是的，我对这个话题感到有些困惑。 如果有人能指出我正确的方向或指出我可能会误解，那将是一个很大的帮助！
您可以为特定域创建Google API key ，这样您就可以确保其他人无法在其网页上使用该key等。
我也使用这个api来表达Google place指令，我们需要API密钥才能获得API SDK。
这是指令代码。
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); }); }); } }; }
你可以像使用它一样
然后在控制器中捕获place_changed事件。
$scope.$on('place_changed', function (e, place) { // do something with place });
你可以在脚本中传递你的api密钥作为参数
之后，如果您看到此错误ApiNotActivatedMapError则表示您需要在google dev控制台中激活服务google地点
https://console.developers.google.com
在API谷歌地图下点击更多，您应该看到Google Places API Web Service点击它并激活。
希望这可以帮助