我想在本地应用程序中使用angularjs google Places autocomplete。 在 plunker 中尝试时代码可以正常工作,但是当将相同的代码复制到本地应用程序时,它会抛出错误。 Working code demo here.
HTML 代码:
<body ng-app="myApp" ng-controller="MainController">
<h1>Hello, World!</h1>
<input type="text" ng-model="search" my-autocomplete>
<p>Search: {{search}}</p>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script data-require="angular.js@1.3.0-rc2" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script src="script.js"></script>
</body>
脚本.js
angular.module('myApp', [])
.controller('MainController', function($scope) {
})
.directive('myAutocomplete', function($log) {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var autocomplete = new google.maps.places.Autocomplete(element[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var address = element.prop('value')
ngModel.$setViewValue(address);
});
}
};
});
下面是在我的本地应用程序中尝试时显示的错误消息:
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.kb @ js:34
maps.googleapis.com/maps-api-v3/api/js/27/12/util.js:210 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
iB.j @ maps.googleapis.com/maps-api-v3/api/js/27/12/util.js:210
maps.googleapis.com/maps-api-v3/api/js/27/12/util.js:210 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
任何建议都将有助于解决此错误。下面是本地运行时的页面屏幕截图。
最佳答案
加载 API 的脚本元素缺少所需的身份验证参数。如果您使用标准 Maps JavaScript API,则必须使用带有有效 API key 的 key 参数。基本上你必须传递 key 。请参阅 Api 文档 - api link
关于javascript - angularjs 谷歌放置自动完成功能在本地不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42097591/