Vue-google-map 자동 완성 양방향 바인딩이 작동하지 않음

Vue-google-map 자동 완성 양방향 바인딩이 작동하지 않음

vue-google-maps를 사용하고 있으며 플러그인을 실장하고 있어 문제없이 동작합니다만, 작은 문제가 있습니다(또는 올바르게 동작하지 못할 수도 있습니다).자동 완성 기능을 실장했을 때, 한 가지 방법으로 동작했습니다.주소를 입력하면 선택한 장소가 지도에 표시되지만 포인터를 드래그해도 검색 필드에 주소가 업데이트되지 않습니다.Vuejs 2와 vue-google-map을 사용하고 있다.

제가 하고 있는 일은 다음과 같습니다.

<template>
    <div>
        <label>
            AutoComplete
            <GmapAutocomplete :position.sync="markers[0].position" @keyup.enter="usePlace" @place_changed="setPlace">
            </GmapAutocomplete>
            <button @click="usePlace">Add</button>
        </label>
        <br/>

        <gmap-map
            :center="center"
            :zoom="7"
            map-type-id="terrain"
            style="width: 100%; height: 500px"
        >
            <gmap-marker
                @dragend="updateMaker" 
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                :clickable="true"
                :draggable="true"
                @click="center=m.position"
            ></gmap-marker>

        </gmap-map>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                center: {lat: 10.0, lng: 10.0},
                markers: [{
                    position: {lat: 11.0, lng: 11.0}
                }],
                place: null,
            }
        },
        description: 'Autocomplete Example (#164)',
        methods: {
            setPlace(place) {
                this.place = place
            },
            setDescription(description) {
                this.description = description;
            },
            usePlace(place) {
                if (this.place) {
                    var newPostion = {
                        lat: this.place.geometry.location.lat(),
                        lng: this.place.geometry.location.lng(),
                    };
                    this.center = newPostion;
                    this.markers[0].position =  newPostion;
                    this.place = null;
                }
            },
            updateMaker: function(event) {
                console.log('updateMaker, ', event.latLng.lat());
                this.markers[0].position = {
                    lat: event.latLng.lat(),
                    lng: event.latLng.lng(),
                }
            },
        }
    }
</script>

이게 지원되는지 잘 모르겠어요.이것은, 직접 실장할 필요가 있는 경우가 있습니다.

고객님의 고객명updateMaker()메서드, 사용할 수 있습니다.google.maps.Geocoder()주소 이름을 직접 찾으려면:

updateMaker: function(event) {
   const geocoder = new google.maps.Geocoder()
   geocoder.geocode({ 'latLng': event.latLng }, (result, status) => {
       if (status === google.maps.GeocoderStatus.OK) {
         // set the input field value with address:
         console.log(result[0].formatted_address)
       }
   })
}

다음과 같이 자동 완성 컴포넌트에 'ref'를 추가합니다.

<GmapAutocomplete ref="gmapAutocomplete" :position.sync="markers[0].position" @keyup.enter="usePlace" @place_changed="setPlace">
        </GmapAutocomplete>

updateMarker 함수를 다음과 같이 변경합니다.

updateMaker: function(event) {
    console.log('updateMaker, ', event.latLng.lat());
    this.markers[0].position = {
       lat: event.latLng.lat(),
       lng: event.latLng.lng(),
    }
    const geocoder = new google.maps.Geocoder()
    geocoder.geocode({ 'latLng': event.latLng }, (result, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          this.$refs.gmapAutocomplete.$refs.input.value = result[0].formatted_address
        }
    })
},

언급URL : https://stackoverflow.com/questions/52639743/vue-google-map-autocomplete-two-way-binding-not-working