Vue.js + Google Places: 여러 입력 필드 자동 완성

경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다.

일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 됩니다.

단일 입력 필드에 대한 자동 완성 개체를 인스턴스화하는 방법을 살펴보겠습니다.

단일 입력 필드에 대한 자동 완성 배치

vue 템플릿에서 ref 속성으로 입력 필드를 정의합니다.

<input type="text" placeholder="Origin" ref="origin" />

mounted() 함수 내에서 기존 id를 사용하는 것보다 더 효율적인 ref 속성을 사용하여 입력 필드 DOM 요소를 전달하여 Autocomplete 객체를 인스턴스화합니다.

mounted() {
    const autocomplete = new google.maps.places.Autocomplete(this.$refs["origin"]);
},

꽤 직설적 인!

작동하지 않는 경우 Places Javascript 라이브러리를 index.html 파일에 추가해야 합니다.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

Also, make sure to enable both the Maps JavaScript API & Places API libraries in the Google Cloud Console website if you haven’t done so already.

여러 입력 필드에 대한 자동 완성 배치

목적지에 대한 다른 입력 필드를 추가해 보겠습니다.

<input type="text" placeholder="Origin" ref="origin" />
<input type="text" placeholder="Destination" ref="destination" />

아시다시피 vue 템플릿의 HTML 요소에 값이 있는 ref 속성을 추가하면 this.$refs Javascript 객체에 추가됩니다.

this.$refs 개체를 반복하고 입력 DOM 요소에 동적으로 액세스해 봅시다.

mounted() {
    for (let ref in this.$refs) {
       console.log(this.$refs[ref]);
    }
}

이제 루프 내부의 각 입력 필드에 대해 Autocomplete 개체를 인스턴스화합니다.

mounted() {
    for (let ref in this.$refs) {
         const autocomplete = new google.maps.places.Autocomplete(this.$refs[ref]);
    }
}

개체 자동 완성에 클릭 이벤트 연결

사용자가 선택한 주소를 얻으려면 자동 완성 개체에 place_changed 이벤트를 첨부해야 합니다.

mounted() {
    for (let ref in this.$refs) {
         const autocomplete = new google.maps.places.Autocomplete(this.$refs[ref]);

      autocomplete.addListener("place_changed", () => {
        const place = autocomplete.getPlace();
        console.log(place);
       }
    }
}

당신은 그것을 가지고 있습니다!