将agm-map封装进自定义组件后地图无法渲染的问题排查

你遇到的问题是将AGM地图封装到自定义组件后无法渲染，结合你的代码和描述，可能遗漏了以下几点：

1. SharedModule未导出自定义地图组件 #

你在shared.module.ts中仅声明了MapComponent，但如果其他功能模块要使用<app-map>标签，必须在SharedModule的exports数组中也加入该组件，否则其他模块无法识别这个自定义组件：

@NgModule({
  declarations: [..., MapComponent],
  exports: [..., MapComponent] // 必须添加这行
})
export class SharedModule { }

2. 样式文件后缀不匹配 #

组件元数据里styleUrls引用的是.scss文件，但你提供的是.css文件。如果实际文件是.css，需要修改组件配置：

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css'], // 改为.css后缀
})

AGM地图必须设置明确的高度才能渲染，如果样式未生效，地图会因高度为0而不可见。

3. SharedModule未导入AgmCoreModule #

即使全局配置了AGM，若SharedModule是被其他模块导入的，需要在SharedModule中导入AgmCoreModule（可使用forRoot或forChild，根据你的全局配置调整），否则封装组件内的<agm-map>标签无法被解析：

import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: '你的谷歌地图API密钥'
    })
  ],
  declarations: [..., MapComponent],
  exports: [..., MapComponent]
})
export class SharedModule { }

4. 模板中重复绑定属性 #

你的<agm-map>模板里重复绑定了zoomControl属性：

<agm-map flex #map [latitude]="latitude" [zoomControl]="true" [longitude]="longitude" [zoom]="zoomLevel" [zoomControl]="hasZoomControls">

重复绑定会导致属性值冲突，建议只保留一个绑定：

<agm-map flex #map [latitude]="latitude" [longitude]="longitude" [zoom]="zoomLevel" [zoomControl]="hasZoomControls">

5. 调整地图resize触发时机 #

可以尝试监听AGM地图的mapReady事件，在地图初始化完成后再触发resize，比固定延迟的setTimeout更可靠：

<agm-map flex #map [latitude]="latitude" [longitude]="longitude" [zoom]="zoomLevel" [zoomControl]="hasZoomControls" (mapReady)="onMapReady($event)">

onMapReady(map: google.maps.Map): void {
  setTimeout(() => {
    google.maps.event.trigger(map, 'resize');
  }, 100);
}

内容的提问来源于stack exchange，提问作者Mauricio Gracia Gutierrez