Google Places Autocomplete选中值存储与跨页面传值问题求助

问题核心 #

直接获取输入框value失败的原因是：Google Places Autocomplete选中选项后，输入框可能显示简化名称，而你需要的完整地址formatted_address，需要从getPlace()返回的place对象中提取。

第一步：修改Autocomplete代码，存储目标地址 #

在place_changed回调里，直接从place对象中提取formatted_address，存入localStorage：

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
  var input = document.getElementById('autocomplete_search');
  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.addListener('place_changed', function () {
    var place = autocomplete.getPlace();
    // 校验对象有效性，避免空值报错
    if (place && place.formatted_address) {
      // 将完整地址存入localStorage
      localStorage.setItem('selectedCity', place.formatted_address);
      // 可选：同步更新输入框为完整地址
      input.value = place.formatted_address;
    }
  });
}

第二步：在目标页面读取并设置默认值 #

在需要显示默认地址的页面，添加以下代码：

window.addEventListener('load', function() {
  var targetInput = document.getElementById('target_input_id'); // 替换为目标输入框的ID
  var savedCity = localStorage.getItem('selectedCity');
  if (savedCity) {
    targetInput.value = savedCity;
    // 可选：用完后清除存储，避免下次加载显示旧值
    // localStorage.removeItem('selectedCity');
  }
});

关键说明 #

• 不用输入框value的原因：Autocomplete选中选项后，输入框可能仅显示短名称（如城市名），而formatted_address是和开发者工具中一致的完整结构化地址。
• 空值校验：必须检查place和place.formatted_address是否存在，避免用户未选中有效地址时触发报错。
• localStorage限制：仅支持同源页面共享数据，存储内容为字符串，若需存储复杂对象需用JSON.stringify()转换。

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