Vue-google-map 自动完成两种方式绑定不起作用

Posted 2023-02-16

【中文标题】Vue-google-map 自动完成两种方式绑定不起作用

【英文标题】：Vue-google-map autocomplete two way binding not working

【发布时间】：2019-03-09 10:24:57

【问题描述】：

我正在使用vue-google-maps，并且我已经实现了该插件并且它可以完美运行，但是有一个小问题（或者我可能无法正确完成）。当我实现自动完成功能时，它以一种方式工作。我输入地址，地图将我指向所选地点，但是当我拖动指针时，它不会更新搜索字段中的地址。 我正在使用 Vuejs 2 和vue-google-maps

这就是我正在做的：

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

【参考方案1】：

我不确定这是否受支持。您可能必须自己实现。

在您的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)
       
   )

【参考方案2】：

将 '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
        
    )
,