【问题标题】:angularjs google places autocomplete not working locallyangularjs google地方自动完成在本地不起作用
【发布时间】:2017-02-07 18:47:35
【问题描述】:

我想在我的本地应用程序中使用 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&amp;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>

script.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

任何建议将有助于解决此错误。以下是本地运行时的页面截图。

【问题讨论】:

    标签: javascript angularjs google-places-api


    【解决方案1】:

    加载 API 的脚本元素缺少必需的身份验证参数。如果您使用的是标准 Maps JavaScript API,则必须使用带有有效 API 密钥的密钥参数。基本上你必须通过密钥。请参考 Api 文档 - api link

    【讨论】:

    • 有没有办法在不生成密钥的情况下让它工作,正如我在这里展示的演示:embed.plnkr.co/IHj6SlyVyxNJEVtzQWUt 正在工作。是否有任何其他 angularjs API 来实现此功能。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-25
    • 1970-01-01
    相关资源
    最近更新 更多