google autocomplete 다운로드 -Google google autocomplete 소스 코드 다운로드

google autocomplete

타사 구성 요소

vements

다운로드

Google Autocomplete

나는이 단순한 직업을 달성하기 위해 복잡한 예에 압도 되었기 때문에이 구성 요소를 공유하고 있습니다. 그래서 나는 설명하는 동안 가능한 한 간단하게 노력할 것입니다.

Google Autocomplete 구성 요소는 공식 Google Places API 주변의 Vue.js 래퍼에 지나지 않습니다. Vue.js 로 작성된 데모에도 불구하고 모든 JS 프레임 워크 에서 자동 완성 객체를 가져올 수 있습니다.

요구 사항

Vue & Vuemit을 설치해야합니다.

 npm install vue -- save

 npm install vuemit -- save

Vuemit 라이브러리는 Google 구성 요소와 부모의 이벤트를 관리하는 데 사용됩니다.

참고 : Vue 1.* VUE-1 지점에서 가져와야합니다.

데모

라이브 데모를보십시오.

설치

이 패키지를 설치하려면 콘솔을 열고 npm i google-autocomplete-vue --save 입력하면됩니다. 설치 중에 문제가있는 경우 force Param : npm i -f google-autocomplete-vue --save

시작하기

우선 , Google API 콘솔 에 가입하려면 API 키를 얻으려면 https://console.developers.google.com이 완료되면 Google이 제공 한 API 키를 복사하여 JS 파일 입력 지점에 붙여 넣어야합니다. 예:

부트 스트랩 파일 : bootstrap.js. 이 파일의 vuemit 에 이벤트 핸들러가 Globaly를 설정하도록해야합니다. 그렇게 : 예
진입 점 파일 : demo.js

참고 : 중요한 키는 .env 파일 내에 보관해야하므로 코드를 GIT 컨트롤로 푸시하면서이를 알고 있어야합니다.

둘째 , 응용 프로그램 입력 지점에서 구성 요소를 가져와야하므로 필요할 때 전 세계적으로 호출 할 수 있습니다. 예:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

서버 측에서 유효성 검사

장소 유효성 검사는 사용자 주소를 처리하는 데 도움이되는 Laravel 라이브러리 입니다. 목표는 사용자가 제출 한 주소가 Google과 같이 타사 서비스를 통해 유효한 지 확인하는 것입니다.

저장소 : 장소 검증을 살펴보십시오

가이드

우선, 구성 요소를 컴파일하고 번들 파일을 생성하려면 진입 점을 만들어야합니다. 예를 들어 여기에서 볼 수 있습니다.
둘째, 구성 요소를 제어하려면 vue 객체를 만들어야합니다.

 require ( './bootstrap' ) ;


new Vue ( {

    el : '#demo' ,


    data :
    {
        output : { } , address : { } , sent : false , response : { } , config : { }
    } ,


    mounted ( )
    {
        //Set an event listener for 'setAddress'.
        Vuemit . listen ( 'setAddress' , this . onAddressChanged ) ;
        Vuemit . listen ( 'addressWasCleared' , this . onAddressCleared ) ;
    } ,


    methods :
    {
        /**
         * Submit the data to be evaluated.
         *
         * @return {Void}
         */
        submit ( )
        {
            this . sent = true ;
            this . output = this . address ;
            this . address = { } ;
        } ,


        /**
         * Checks whether the output data is valid.
         *
         * @return {Bool}
         */
        isValid ( )
        {
            return Object . keys ( this . output ) . length > 0 ;
        } ,


        /**
         * Checks whether the output data is not valid.
         *
         * @return {Bool}
         */
        isNotValid ( )
        {
            return ! this . isValid ( ) ;
        } ,


        /**
         * The callback fired when the autocomplete address change event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressChanged ( payload )
        {
            if ( Object . keys ( paypload . place ) . length > 0 ) {
                this . address = payload . address ;
                this . response = payload . response ;
            }
        }

        /**
         * The callback fired when the autocomplete clear event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressCleared ( )
        {
            this . address = { } ;
            this . response = { } ;
        }
    }
} ) ;

여기 예를 참조하십시오.

셋째, 모든 브라우저에 대해 읽을 수 있도록 Browserify , Webpack 또는 Laravel-Elixir-Vue-2 로이 두 파일을 컴파일해야합니다. 예:

 require ( 'laravel-elixir-vue-2' ) ;
var elixir = require ( 'laravel-elixir' ) ;

elixir . config . sourcemaps = false ;
elixir . config . assetsPath = 'src' ;

elixir ( function ( mix )
{
    mix . webpack ( 'demo.js' , 'dist/demo.js' ) ;
} ) ;

여기 예를 참조하십시오

마지막 으로이 구문을 사용하여 HTML 파일의 구성 요소를 사용할 수 있습니다.

 < google-autocomplete
    class = " input "
    input_id = " txtAutocomplete "
    :config = " {type: ['geocode']} "
    placeholder = " type your address "
>
</ google-autocomplete >