Question

嗨，我一直在努力导入Google Maps JS库。我已经使用npm安装了@ google / maps库，但是无法在组件文件中导入该库的引用。

我已经尝试过此问题中提到的所有内容：@types/googlemaps/index.d.ts' is not a module

但是我仍然无法在我的组件中使用Google地图。

这是我在代码中正在做的事情：

    /// <reference types="@types/googlemaps" />
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
 import {} from '@google/maps';

@Component({
  selector: 'app-main-search',
  templateUrl: './main-search.component.html',
  styleUrls: ['./main-search.component.scss']
})
export class MainSearchComponent implements OnInit {
  @ViewChild('city', { read: ElementRef }) searchCityInput:ElementRef;
  listOfOption = ['Java Developer', 'Java Team Lead', 'Java Architect', 'Java Programmer', 'Senior Java Developer'];
  listOfSelectedValue = [ ];
  recent_active = false;
  constructor(private router: Router) { }

  ngOnInit(): void {
    const autocomplete = new google.maps.places.Autocomplete(this.searchCityInput.nativeElement);
    console.log("Input: ", autocomplete);
    //Event listener to monitor place changes in the input
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      //Emit the new address object for the updated place
      // this.onSelect.emit(this.getFormattedAddress(autocomplete.getPlace()));
      console.log("Formated Address: ", autocomplete.getPlace());
    });
  }

  onSubmit() {
    this.router.navigateByUrl('/search/results');
  }
}

我收到此错误：

错误TypeError：无法读取未定义的属性“自动完成”

Answer 1

如评论中所述，Piyush必须在其项目中包含场所库。

Angular 7使用导入的Googlemaps

1 个答案: