Angular中Google Map API无法添加标记问题排查求助

你的代码核心问题是同时混用了两种地图初始化方式：一边用Angular官方封装的<google-map>组件渲染地图，另一边又手动通过原生Google Maps API创建了另一个独立的地图实例，而标记被添加到了这个未实际展示的原生地图上，所以看不到。

问题细节 #

• 页面中实际展示的是<google-map>组件生成的地图（绑定了center属性）
• 你手动创建的new google.maps.Map绑定到了id="map"的空div上，这个div没有设置尺寸，默认是高度为0的不可见元素
• 标记marker.setMap(map)是添加到这个不可见的原生地图上，而非页面显示的Angular组件地图

修复方案：统一使用Angular Google Maps组件方式 #

修改后的TypeScript代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  center: google.maps.LatLngLiteral = { lat: 0, lng: 0 };
  options: google.maps.MapOptions = {
    zoomControl: false,
    scrollwheel: true,
    disableDoubleClickZoom: true,
    mapTypeId: 'roadmap',
    zoom: 14,
  };
  // 定义标记数组，用于Angular组件渲染
  markers: google.maps.MarkerOptions[] = [];

  ngOnInit() {
    // 获取当前位置并设置地图中心
    navigator.geolocation.getCurrentPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
    });

    // 添加目标标记到数组
    this.markers.push({
      position: { lat: 53.280040911392774, lng: -9.010356288290776 },
      title: "PARK"
    });
  }
}

修改后的HTML代码 #

<div class="area">
  <div class="position">
    <google-map
      height="60vh"
      width="100%"
      [center]="center"
      [options]="options"
    >
      <!-- 循环渲染所有标记 -->
      <map-marker 
        *ngFor="let marker of markers"
        [position]="marker.position"
        [title]="marker.title"
      ></map-marker>
    </google-map>
  </div>
</div>
<!-- 移除无用的空map div -->

额外注意事项 #

1. 确保已正确安装并导入Angular Google Maps模块：
   • 执行npm install @angular/google-maps安装依赖
   • 在组件所属的NgModule中导入GoogleMapsModule
2. 若坚持使用原生Google Maps API手动创建地图，需给id="map"的div设置明确尺寸（如style="height:60vh; width:100%;"），并移除<google-map>组件，但这种方式不符合Angular组件化开发规范。

内容的提问来源于stack exchange，提问作者Corey673