Google 使用 Angular 中的 js api 加载器放置库小部件

Question

我正在尝试使用谷歌地点库创建一个地址输入字段。我想使用 google-js-api-loader 而不是脚本标记，但我似乎无法使其工作。 到目前为止，这是我的代码：

地址自动完成.component.html

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

地址自动完成.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
    });
  }
}

我设置了输入字段的初始值，但是，即使自动完成变量包含自动完成对象，它仍然返回未定义。我可能错过了一些明显的东西。提前致谢。 编辑：拼写

Answer 1

我正在寻找一个库来处理地址自动完成，我使用了你的代码并对其进行了一些更改，尝试以这种方式处理它：

loader.load().then((google) => {
        const autocomplete = new google.maps.places.Autocomplete(
            autoCompleteNativeElementRef
        );
        google.maps.event.addListener(autocomplete, 'place_changed', () => 
           {
            this.ngZone.run(() => {
                const place = autocomplete.getPlace();
                const marker = this.convertGooglePlaceToMarker(place);
                this.addNewMarker(marker);
                callbackPlaceChanged(marker);
            });
        });
    });