Angular使用@googlemaps/js-api-loader加载Places库getPlace返回undefined问题

我正在尝试使用Google Places库实现地址输入框功能，希望采用@googlemaps/js-api-loader替代script标签的引入方式，但始终无法正常运行，当前实现代码如下：

address-autocomplete.component.html

<input
  id="autocomplete"
  type="text"
  pInputText
  [(ngModel)]="inputAddress"
  [style]="{ width: '15rem' }"
/>

address-autocomplete.component.ts

import {} from "@angular/google-maps";
import { Loader } from "@googlemaps/js-api-loader";

@Component({
  selector: "app-address-autocomplete",
  templateUrl: "./address-autocomplete.component.html",
  styleUrls: ["./address-autocomplete.component.scss"],
})
export class AddressAutocompleteComponent implements OnInit {
  inputAddress = "London";
  autocomplete!: google.maps.places.Autocomplete;
  constructor() {}

  ngOnInit() {
    const loader = new Loader({
      apiKey: "API_KEY",
      version: "weekly",
      libraries: ["places"],
    });
    loader.load().then((google) => {
      this.autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("autocomplete") as HTMLInputElement
      );
      console.log(this.autocomplete);
      // Gs {setTypes: function, setComponentRestrictions: function, getPlace: function, getBounds: function, …}
      console.log(this.autocomplete.getPlace());
      // undefined
    });
  }
}

我已为输入字段设置初始值，虽然控制台打印可见autocomplete变量已成功实例化为Autocomplete对象，但调用autocomplete.getPlace()始终返回undefined，推测是遗漏了某些基础配置。

getPlace()返回undefined不是配置缺失，是该API的默认设计逻辑导致的：

• 你给输入框设置的初始值London只是普通文本内容，Autocomplete组件不会主动对初始填充的文本做地点匹配
• 只有用户手动从下拉预测列表中选中某一个地址选项后，组件才会将选中的完整地点数据绑定到实例上，此时调用getPlace()才能拿到有效返回值
• 组件刚初始化完成时，还没有触发用户选择地点的动作，自然返回undefined

你需要监听Autocomplete实例的place_changed事件，在用户完成地址选择后再调用getPlace()获取数据，修改后的初始化代码如下：

loader.load().then((google) => {
  const inputElement = document.getElementById("autocomplete") as HTMLInputElement;
  this.autocomplete = new google.maps.places.Autocomplete(inputElement);

  // 监听地点选择事件
  this.autocomplete.addListener("place_changed", () => {
    const selectedPlace = this.autocomplete.getPlace();
    console.log(selectedPlace); // 此处可拿到用户选中的完整地点数据
  });
});

如果需要在组件初始化时就根据输入框默认值查询对应地点，不能直接依赖Autocomplete实例的getPlace()方法，需要额外调用Places服务的文本搜索接口实现，参考代码：

loader.load().then((google) => {
  const inputElement = document.getElementById("autocomplete") as HTMLInputElement;
  this.autocomplete = new google.maps.places.Autocomplete(inputElement);

  // 初始化时匹配默认输入值的地点数据
  const placesService = new google.maps.places.PlacesService(inputElement);
  placesService.findPlaceFromQuery({
    query: this.inputAddress,
    fields: ["name", "geometry", "formatted_address"]
  }, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK && results?.length) {
      console.log("初始值匹配到的地点：", results[0]);
    }
  });

  // 监听用户手动选择地址的事件
  this.autocomplete.addListener("place_changed", () => {
    const selectedPlace = this.autocomplete.getPlace();
    console.log(selectedPlace);
  });
});

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