javascript - Angular 2在初始化第二张 map 时无法读取未定义的属性 'maps'

Question

我必须在我的应用程序中绘制 map 。第一个出现在登录后并且运行良好。第二个被放置在另一个组件中，在实例化时我收到错误

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'maps' of undefined

Google map 脚本放置在 index.html 中，在这两种情况下，我都使用 ngOnInit 方法来创建 map 。

如果一张 map 有效而第二张 map 无效，可能会出现什么问题？

//imports
var google: any;

@Component({
  selector: 'app-friend-latest-position',
  templateUrl: 'friend-latest-position.component.html',
  styleUrls: ['friend-latest-position.component.css']
})
export class FriendLatestPositionComponent implements OnInit,AfterViewInit {

  private location: Location = new Location();
  private email: string;
  private hasLocation: boolean = false;


  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.email = this.route.snapshot.params['email'];
  }

  ngAfterViewInit(): void {
    this.getSelectedUser();
  }


  getSelectedUser() {
    // fetching data
   this.initMap();
  }

  initMap() {
    const loc = {lat: this.location.latitude, lng: this.location.longitude};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: loc
    });
}

Answer 1

你应该写

declare const google: any;

或者安装 Google map 类型

npm install @types/google-maps --save-dev

如果您使用 var，您当前的 Google 对象将在 typescript 文件的范围内被覆盖。