如何将PlaceAutocompleteElement绑定到现有文本输入框？

你可以直接将现有输入框元素传入新版Autocomplete的构造函数，无需使用appendChild插入新元素，具体实现如下：

步骤1：确保加载包含Places库的谷歌Maps脚本 #

在页面中引入谷歌Maps JavaScript库时，需指定加载places库（参数格式为libraries=places）。

步骤2：初始化Autocomplete并绑定现有输入框 #

// 监听DOM加载完成，确保输入框已存在
document.addEventListener('DOMContentLoaded', () => {
  // 获取页面上已有的输入框DOM元素
  const existingInput = document.getElementById('your-input-id');
  
  // 初始化新版Autocomplete，直接传入现有输入框
  const autocomplete = new google.maps.places.Autocomplete(existingInput, {
    // 可选配置：指定需要返回的地点字段
    fields: ["address_components", "formatted_address", "geometry", "name"],
    // 可选配置：限制搜索类型，比如仅地址
    types: ["address"],
    // 可选配置：限制搜索国家，例如中国
    componentRestrictions: { country: "cn" }
  });

  // 监听地点选择事件
  autocomplete.addListener('place_changed', () => {
    const selectedPlace = autocomplete.getPlace();
    // 处理选中的地点数据，比如填充到表单或展示信息
    console.log('选中地点信息:', selectedPlace);
  });
});

关键说明 #

• 必须保证输入框在初始化Autocomplete之前已被渲染到DOM中，否则会导致绑定失败
• 配置项可根据业务需求调整，比如componentRestrictions用于限定搜索区域，types用于过滤结果类型

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