AngularJS - Google 지역 정보 자동 완성 API 키

Question

Google의 API를 처음 사용하고 장소 자동 완성 API를 각도로 구현하는 방법을 알아 내려고 노력했습니다. 나는 일반적으로 자동 완성 기능을 사용하지 못했다. 나는 현재 jQuery 라이브러리를 내 프로젝트에 포함시키지 않았지만, element.autocomplete이라는 지시어 내에서이를 활용하는 개발자를 보았다고 생각합니다.

나는이에 도움이 될 기존 지침을 찾아 않았고, 내가 찾은 : https://github.com/kuhnza/angular-google-places-autocomplete

을 그 설정 문서에 따르면 후, 나는 그것이 작동시킬 수 있었다, 그리고 한 또한 API 키가 처음으로 작동하도록 API 키를 설정할 위치를 알지 못했습니다. 주요 오류는 API 키와 관련이 있다고 생각하지만 긍정적이지는 않습니다.

Google의 문서에는 장소 라이브러리를 가져올 때 API 키가 key 매개 변수로 포함되어 있다고 나와 있습니다. 지시어의 설명서 에서처럼 키를 생략하면 MissingKeyMapError이됩니다. Google이 말하는 것처럼 키를 추가하면 ApiNotActivatedMapError이됩니다. 동시에 Google은 내 API 키가 서버 API 키이고 "이 키는 서버에 숨겨져 있어야합니다"라고 말합니다.

내가 참조하고있어 도서관에서 당기의 라인은 다음과 같습니다 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

내 PHP 백엔드하거나 브라우저가 결과로 날을 제공에 컬을 요청을하는. 이제 Autocomplete의 작동 방식과 AngularJS와의 작동 방식을 이해하려고합니다.

그래, 나는이 주제에 대해 약간 혼란스러워. 누구든지 올바른 방향으로 나를 가리킬 수 있거나 내가 오해 할 수도있는 것을 지적 할 수 있다면 큰 도움이 될 것입니다!

<script 
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
     </script> 

을 PARAMS하고이 오류가있는 경우 그 후 ApiNotActivatedMapError 다음은 당신이 당신의 구글 dev에 콘솔의 서비스 구글 장소를 활성화해야한다는 뜻

Answer 1

당신은 특정 도메인에 대한 구글의 API key을 만들 수 있으며,이 방법으로 당신은 다른 사람이 등을 자신의 페이지

에서 사용할 수 있는지 확인합니다 도움이 또한했습니다 이 API를 사용하여 Google place 지시어를 구현했으며 API SDK를 얻으려면 API 키가 필요합니다.

<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 
}); 

Answer 2

당신은 스크립트에서 바로 여기 API 키를 전달할 수 있습니다

https://console.developers.google.com

API에서 Google지도는 더 클릭하면 Google Places API Web Service이 그것을 클릭하고 활성화 볼 수 있습니다.

희망이