Angular中Google Map Marker报错：'position'无法分配至Marker类型

核心问题分析 #

• 类型错误：addMarker函数参数定义为google.maps.Marker，但传入的是MarkerOptions字面量，导致TypeScript类型校验报错。
• InfoWindow失效：未正确创建Marker实例、未将Marker关联到地图，也未绑定点击事件触发InfoWindow显示。

修复步骤与代码调整 #

1. 修正addMarker函数的参数与逻辑 #

将参数类型改为MarkerOptions，在函数内部创建真实的Marker实例并关联到地图，同时返回实例方便后续绑定InfoWindow：

addMarker(options: google.maps.MarkerOptions): google.maps.Marker {
  const marker = new google.maps.Marker({
    ...options,
    map: this.map // 必须关联已初始化的地图实例
  });
  this.markers.push(marker);
  return marker;
}

2. 绑定InfoWindow到Marker点击事件 #

在循环创建Marker后，为每个Marker添加点击监听，通过全局InfoWindow复用实例（或创建独立实例）显示内容：

// 替换ngOnChanges中的循环代码
for(const page of pagesWithGis){
  const pageName = page.pageName;
  const type = page.gis.type;
  const latitude = page.gis.latitude;
  const longitude = page.gis.longitude;

  // 创建Marker并获取实例
  const marker = this.addMarker({
    position: {lat: latitude, lng: longitude}, 
    title: pageName,
  });

  // 绑定点击事件触发InfoWindow
  marker.addListener('click', () => {
    // 复用全局InfoWindow更新内容
    this.infoWindow.setContent(`Page: ${pageName} - Type: ${type}`);
    this.infoWindow.open({
      anchor: marker,
      map: this.map
    });
  });
}

3. 确保地图完成初始化 #

在ngAfterContentInit中完成地图初始化，否则Marker无法渲染到地图上：

ngAfterContentInit(): void {
  // 替换为你的地图容器DOM ID
  const mapElement = document.getElementById('map') as HTMLElement;
  if (mapElement) {
    this.map = new google.maps.Map(mapElement, {
      center: this.center,
      zoom: this.zoom
    });
  }
}

4. 优化重复标记问题（可选） #

在ngOnChanges中先清空旧标记，避免数据更新时重复添加：

ngOnChanges(changes: SimpleChanges): void {
  if (!this.map || !this.userdata?.pages) return;

  // 清空旧标记
  this.markers.forEach(marker => marker.setMap(null));
  this.markers = [];

  // 后续创建新标记的逻辑...
}

完整修正后的组件代码示例 #

import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';

declare var google: any;

export class GMapComponent implements AfterContentInit, OnChanges {
  
  constructor() { }

  @Input() userdata: any = {}
  @Input() pages: any = null
  index = 0
 
  map!: google.maps.Map;
  markers: google.maps.Marker[] = [];
  infoWindow = new google.maps.InfoWindow();
  display: any;
  center: google.maps.LatLngLiteral = {lat: -33.779104947067, lng: 25.558868084657444};
  zoom = 8;
 
  ngAfterContentInit(): void {
    const mapElement = document.getElementById('map') as HTMLElement;
    if (mapElement) {
      this.map = new google.maps.Map(mapElement, {
        center: this.center,
        zoom: this.zoom
      });
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (!this.map || !this.userdata?.pages) return;

    // 清空旧标记
    this.markers.forEach(marker => marker.setMap(null));
    this.markers = [];

    const pagesWithGis = this.userdata.pages.filter((page: any) => page.gis != null);

    for(const page of pagesWithGis){
      const pageName = page.pageName;
      const type = page.gis.type;
      const latitude = page.gis.latitude;
      const longitude = page.gis.longitude;

      const marker = this.addMarker({
        position: {lat: latitude, lng: longitude}, 
        title: pageName,
      });

      marker.addListener('click', () => {
        this.infoWindow.setContent(`Page: ${pageName} - Type: ${type}`);
        this.infoWindow.open({
          anchor: marker,
          map: this.map
        });
      });
    }
  }

  addMarker(options: google.maps.MarkerOptions): google.maps.Marker {
    const marker = new google.maps.Marker({
      ...options,
      map: this.map
    });
    this.markers.push(marker);
    return marker;
  } 

  openInfoWindow(marker: google.maps.Marker, content: string) {
    this.infoWindow.setContent(content);
    this.infoWindow.open({
      anchor: marker,
      map: this.map
    });
  }
}

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