我是使用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一起工作。
是的，我对整个主题有些困惑。如果有人可以指出正确的方向或指出我可能会误解的地方，那将是很大的帮助！
您可以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] 删除。
我来说两句