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

【问题标题】：Property 'map' is used before its initialization. (Google Maps in Angular)属性“地图”在其初始化之前使用。（Angular 中的谷歌地图）
【发布时间】：2021-02-13 18:53:47
【问题描述】：

我正在努力在一个有角度的网页中实现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；
~~~ 在这里声明了“地图”。 src/app/app.component.ts:36:15 - 错误 TS2729：属性“地图”在其初始化之前使用。

36 地图：this.map,
~~~

src/app/app.component.ts:15:3
15 地图：google.maps.Map； ~~~
'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);
    
       }
       
    }

任何帮助将不胜感激

【问题讨论】：

标签： angular google-maps-api-3

【解决方案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);
}

【讨论】：

这个解决方案有点工作，在我将标记的位置切换到地图初始化器内部之后，我必须添加一个“标记；任何；”在应用组件内部。

【解决方案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);

 }

【讨论】：