如何仅使用Google Places地点自动补全功能而无需加载地图

嘿，刚好我之前做过类似的需求！你完全不需要加载地图，只需要提取Google Places Autocomplete的核心部分就行，下面帮你拆解一下：

1. 必须的API引入 #

首先，加载Google Maps API的时候一定要带上libraries=places参数，因为Autocomplete属于Places库，不需要加载地图相关的内容。你可以这样写：

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

（注意把YOUR_API_KEY换成你自己的密钥）

2. 核心的Autocomplete初始化 #

接下来，只需要针对你的自定义输入框初始化Autocomplete就行，完全不用创建地图对象。假设你的输入框ID是your-custom-input，代码大概是这样：

function initAutocomplete() {
  // 获取你的自定义输入框元素
  const input = document.getElementById('your-custom-input');
  // 初始化Autocomplete
  const autocomplete = new google.maps.places.Autocomplete(input);
  
  // 可选：设置联想的地点类型（比如只显示地址、商家等）
  // autocomplete.setTypes(['address']);
  
  // 可选：设置严格边界（只返回某个区域内的地点）
  // autocomplete.setOptions({strictBounds: true});
}

// 页面加载完成后初始化
window.addEventListener('load', initAutocomplete);

3. 处理用户选择地点后的逻辑（可选） #

如果你需要在用户选中某个地点后获取详细信息（比如经纬度、地址组件），只保留place_changed事件监听，删掉所有和地图、标记相关的代码：

autocomplete.addListener('place_changed', function() {
  const place = autocomplete.getPlace();
  if (!place.geometry) {
    // 处理无效的地点输入
    alert("没有找到匹配的地点信息: '" + place.name + "'");
    return;
  }
  
  // 这里可以获取你需要的地点数据
  console.log('选中的地点名称:', place.name);
  console.log('地点经纬度:', place.geometry.location.lat(), place.geometry.location.lng());
  // 如果需要地址组件，比如街道、城市等
  if (place.address_components) {
    const addressParts = place.address_components.map(component => component.short_name);
    console.log('地址组件:', addressParts);
  }
});

哪些代码可以完全删掉？ #

从你提供的原代码里，这些部分都可以直接去掉：

• 所有和map对象相关的代码（包括new google.maps.Map、map.fitBounds、map.setCenter等）
• marker和infowindow相关的所有逻辑
• bindTo('bounds', map)这行（因为没有地图的边界可以绑定）
• 地图控件相关的代码（比如map.controls.push(card)）

这样处理后，你就可以在自己的自定义输入框里实现纯粹的地点联想功能啦！

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