在初始化之前使用属性“map”。 （Angular 中的谷歌地图）

Question

我正在一个有角度的网页中实现google maps ，但我收到这个错误（该应用程序仍然有效）

编辑：只是为了澄清，地图有效，标记也有效，我只是在我的 Visual Studio 代码中收到错误，并且在我检查网页时没有实现一个方法（这是地图未初始化的例外）

src/app/app.component.ts:29:15 中的错误 - 错误 TS2729：在初始化之前使用属性“地图”。

29 地图：this.map，
~~~

src/app/app.component.ts:15:3 15 地图：google.maps.Map；
~~~ 'map' 在这里声明。 src/app/app.component.ts:36:15 - 错误 TS2729：在初始化之前使用属性“地图”。

36 地图：this.map，
~~~

src/app/app.component.ts:15:3
15 地图：google.maps.Map； ~~~
'地图'在这里声明。

我的应用程序component.ts

    import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
        
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    
    })
    export class AppComponent implements AfterViewInit  {
      title = 'maps-v1';
      @ViewChild('mapContainer', {static: false}) gmap: ElementRef;
      map: google.maps.Map;
      lat = 37.37;
      lng = -122.04;
      coordinates = new google.maps.LatLng(this.lat, this.lng);
    
    
      mapOptions: google.maps.MapOptions = {
        center: this.coordinates,
        zoom: 12,
        gestureHandling:"cooperative",
      };
    
      marker = new google.maps.Marker({
        position: this.coordinates,
        map: this.map,
        title:"Start"
      });
    
      mark2=new google.maps.Marker({
        label: "TEST",
        position:{lat:37.37,lng:-122.03},
        map: this.map,
        title:"TESTERSZ"
    
      });
    
      ngAfterViewInit(){
        this.mapInitializer();
        throw new Error('Method not implemented.');
        
      }
      
    
      mapInitializer() {
        this.map = new google.maps.Map(this.gmap.nativeElement, 
        this.mapOptions);
        this.marker.setMap(this.map);
        this.mark2.setMap(this.map);
    
       }
       
    }

任何帮助，将不胜感激

Answer 1

该错误是因为在afterViewInit初始化地图之前首先初始化了标记对象

解决方案是将标记初始化移动到mapInitializer()并将它们放在this.map = new google.maps语句之后。

mapInitializer() {
  this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);

  const marker = new google.maps.Marker({
    position: this.coordinates,
    map: this.map, // this.map will contain the map object here
    title:"Start"
  });

  const mark2 = new google.maps.Marker({
    label: "TEST",
    position:{lat:37.37,lng:-122.03},
    map: this.map,
    title:"TESTERSZ"
  });

  marker.setMap(this.map);
  mark2.setMap(this.map);
}

Answer 2

你必须等待地图初始化，所以像下面这样改变它

 mapInitializer() {
    setTimeout(() => {
        this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
    }, 500);
    this.marker.setMap(this.map);
    this.mark2.setMap(this.map);

 }