属性 'map' 在初始化之前使用。（Google 中的地图 Angular）

Question

我正在 angular 网页中实现 google maps，但出现此错误（该应用程序仍然有效）

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

ERROR in src/app/app.component.ts:29:15 - error TS2729: Property 'map' is used before its initialization.

29 map: this.map,
~~~

src/app/app.component.ts:15:3 15 map: google.maps.Map;
~~~ 'map' is declared here. src/app/app.component.ts:36:15 - error TS2729: Property 'map' is used before its initialization.

36 map: this.map,
~~~

src/app/app.component.ts:15:3
15 map: google.maps.Map; ~~~
'map' is declared here.

我的应用程序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

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

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

 }

Answer 2

错误是因为在 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);
}

属性 'map' 在初始化之前使用。（Google 中的地图 Angular）

Property 'map' is used before its initialization. (Google Maps in Angular)

google-maps-api-3

angular

属性 'map' 在初始化之前使用。 （Google 中的地图 Angular）

Property 'map' is used before its initialization. (Google Maps in Angular)

google-maps-api-3

angular

属性 'map' 在初始化之前使用。（Google 中的地图 Angular）