Hybrid移动端VueJs集成Google Places无法选择地点问题

我之前在混合移动应用（比如Cordova/Capacitor环境）里也碰到过一模一样的问题——Google Places搜索列表能正常显示，但点击项完全没反应，浏览器里却一切正常，还没任何报错。结合你的代码和场景，大概率是移动端WebView的事件兼容或DOM层级遮挡导致的，给你几个实用的排查和解决方向：

1. 先排查Quasar组件的DOM遮挡问题 #

你用了Q-field、Q-item这些Quasar容器组件，很可能Google自动完成的下拉列表被Quasar的组件容器裁剪或遮挡了，导致点击事件无法穿透。可以试试：

• 给自动完成组件的容器加更高的层级：

.vue-google-places-container, .vue-google-autocomplete-container {
  z-index: 9999 !important;
}

• 在Q-field上添加属性，避免容器裁剪下拉内容：

<q-field :error="$v.serial.$error" content-class="overflow-visible">

2. 手动绑定点击事件（适配混合应用事件机制） #

混合应用的WebView里，原生点击事件和Web端的事件处理逻辑有时候会有冲突，你可以尝试手动监听下拉项的点击：

mounted() {
  // 监听Google自动完成下拉项的点击
  this.placeClickListener = document.addEventListener('click', (e) => {
    const placeItem = e.target.closest('.pac-item');
    if (placeItem) {
      // 找到对应的输入框，触发placechanged逻辑
      const input = document.querySelector('#map, .vue-google-places input');
      if (input) {
        const autocomplete = window.google.maps.places.Autocomplete.getInstance(input);
        const place = autocomplete.getPlace();
        if (place) {
          // 直接调用你的处理方法
          if (input.id === 'map') {
            this.getAddressData({ formatted_address: place.formatted_address }, place, 'map');
          } else {
            this.onPlaceChanged({ formatted_address: place.formatted_address }, place, input.id);
          }
        }
      }
    }
  }, true);
},
beforeDestroy() {
  // 记得移除监听，避免内存泄漏
  document.removeEventListener('click', this.placeClickListener, true);
}

3. 确保Google Maps API完全加载后再初始化组件 #

混合应用里异步加载API可能有延迟，导致组件初始化时API还没准备好，事件绑定失败。可以动态加载API后再注册组件：

import VueGoogleAutocomplete from "vue-google-autocomplete";
import Vue from "vue";

export default {
  // ...其他配置
  created() {
    // 动态加载Google Places API
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places`;
    script.async = true;
    script.onload = () => {
      // API加载完成后再注册组件
      Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);
      Vue.component('VueGooglePlaces', require('vue-google-places').default);
    };
    document.head.appendChild(script);
  }
}

4. 禁用Quasar的触摸事件干扰 #

Quasar默认的触摸事件处理可能和Google组件冲突，试试给组件添加no-touch类：

<vue-google-autocomplete 
  id="map" 
  class="form-control no-touch" 
  placeholder="Start typing" 
  v-on:placechanged="getAddressData" 
></vue-google-autocomplete>

混合应用的WebView环境和浏览器差异很大，最常见的就是DOM层级遮挡和事件兼容问题，你可以先从z-index调整和手动事件监听这两个方向入手，应该能快速解决点击无响应的问题。

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