Google Maps Autocomplete在模态弹窗中失效的问题咨询

这个问题的核心原因是：Google Places API的自动补全功能是在页面加载完成（通过callback=initAutocomplete触发）时初始化的，但此时你的模态弹窗是隐藏状态。Google Maps的Autocomplete组件在初始化时需要对目标输入框进行渲染相关的操作，隐藏元素会导致这些操作无法正常完成，最终使得自动补全功能失效。

下面是具体的解决方案，分步骤修改：

步骤1：移除脚本的自动初始化回调 #

首先修改Google Maps API的引入脚本，去掉callback=initAutocomplete参数，这样就不会在页面加载时自动初始化补全功能，而是由我们手动控制时机：

<script src="https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places" async defer></script>

步骤2：在模态框显示完成后初始化补全功能 #

修改你的Controller代码，监听模态框的shown.bs.modal事件（Bootstrap模态框完全显示后触发的事件），在这个时机初始化自动补全，确保输入框已经处于可见状态：

$scope.addlocationpopup = function(){
  $(".addlocation").modal("show").on('shown.bs.modal', function() {
    // 避免重复初始化，先判断是否已有实例
    if (!window.autocomplete) {
      initAutocomplete();
    } else {
      // 可选：重新关联输入框，确保绑定有效
      window.autocomplete.setElement(document.getElementById('autocomplete'));
    }
  });
}

步骤3：优化初始化函数（可选） #

如果你的模态框会被多次打开/关闭，可以修改initAutocomplete函数，支持重复初始化时销毁旧实例，避免内存泄漏或重复绑定：

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // 销毁已存在的实例
  if (autocomplete) {
    google.maps.event.clearInstanceListeners(autocomplete);
    autocomplete = null;
  }
  // 初始化新的Autocomplete实例
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
    {types: ['geocode']}
  );
  autocomplete.addListener('place_changed', fillInAddress);
}

// 其余fillInAddress和geolocate函数保持不变

为什么这样有效？ #

Bootstrap的shown.bs.modal事件会在模态框完全显示、动画结束后触发，此时目标输入框已经完全可见且处于DOM的活跃状态，Google Places API可以正确识别并绑定自动补全功能，不会再因为元素隐藏而初始化失败。

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