Google Places API Autocomplete双输入框仅单个生效如何解决

• 事件监听绑定错误：addListener第二个参数需要传入函数引用，你当前写法会在initMap执行时立即调用onPlaceChanged，而非触发place_changed事件时才执行，导致第二个Autocomplete实例的事件绑定失效，同时实例初始化逻辑被异常中断，所以只有第一个输入框能生成占位符、功能正常。
• 回调函数逻辑硬编码：当前onPlaceChanged里固定操作id_departure输入框，即便第二个输入框功能正常，选择无效地址时也会错误清空出发地输入框的内容。

JS代码 #

// GOOGLE MAPS API
function initMap(){
    // 出发地自动补全
    let passengerDeparture = new google.maps.places.Autocomplete(
        document.getElementById('id_departure'),
        {
            types:['address'],
            componentRestrictions:{'country':["lk"]},
            fields:['place_id', 'name', 'geometry']
        }
    )
    // 用箭头函数包裹，事件触发时才执行回调，传入对应实例和输入框ID
    passengerDeparture.addListener('place_changed', () => onPlaceChanged(passengerDeparture, 'id_departure'))

    // 目的地自动补全
    let passengerArrival = new google.maps.places.Autocomplete(
        document.getElementById('id_arrival'),
        {
            types:['address'],
            componentRestrictions:{'country':["lk"]},
            fields:['place_id', 'name', 'geometry']
        }
    )
    passengerArrival.addListener('place_changed', () => onPlaceChanged(passengerArrival, 'id_arrival'))
}

/**
 * 地址选择回调
 * @param {Object} autoCompleteObj 自动补全实例
 * @param {String} inputId 触发事件的输入框ID
 */
function onPlaceChanged(autoCompleteObj, inputId){
    let place = autoCompleteObj.getPlace()
    let targetInput = document.getElementById(inputId)
    if (!place.geometry){
        alert("Please choose a valid item")
        targetInput.value = ""
    }else{
        // 可根据inputId区分是出发地/目的地，存储对应经纬度、place_id
        alert(place.geometry.location.lat())
        alert(place.place_id)
    }
}

修复后两个输入框都会正常生成「Enter a location」占位符，各自的自动补全下拉列表互不干扰，选择无效地址时只会清空当前触发事件的输入框内容。

内容的提问来源于stack exchange，提问作者Najaaz