Ionic中使用ngFor循环渲染多个Google Maps地图的实现问题求助

你的问题核心在于单个@ViewChild只能获取到第一个匹配的DOM元素，但ngFor循环生成了多个独立的地图容器，所以无法为每个地点初始化对应的地图。下面是完整的修复方案：

步骤1：修正基础语法错误 #

首先，你的locations数组存在两处语法问题：

• 数组元素之间缺少逗号
• name属性的值没有加引号

修正后的数组应该是：

locations = [
  { id: 1, lat: 1.4046821, lng: 103.8403383, name: 'location 1' },
  { id: 2, lat: 1.4410763, lng: 103.8059827, name: 'location 2' },
  { id: 3, lat: 1.3261783, lng: 103.8203441, name: 'location 3' }
];

步骤2：修改HTML结构（微调） #

保持原有结构，确保#mapCanvas标记正确，每个地图容器的id唯一：

<div *ngFor="let location of locations">
  <ion-card>
    <div style="height: 250px; width: 100%" #mapCanvas id="map{{location.id}}"></div>
    <ion-item>
      <h2>{{location.name}}</h2>
    </ion-item>
  </ion-card>
</div>

步骤3：更新TypeScript代码 #

关键修改点：

• 使用@ViewChildren替代@ViewChild，获取所有#mapCanvas元素
• 在ngAfterViewInit生命周期钩子中，遍历每个地图容器和对应的地点，初始化地图
• 调整loadMap方法，让它接收当前的地图DOM元素和经纬度参数

修改后的TS代码：

import { Component, ViewChildren, ElementRef, QueryList, AfterViewInit } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var google;

@Component({
  selector: 'page-locations',
  templateUrl: 'locations.html',
})
export class LocationsPage implements AfterViewInit {
  locations = [
    { id: 1, lat: 1.4046821, lng: 103.8403383, name: 'location 1' },
    { id: 2, lat: 1.4410763, lng: 103.8059827, name: 'location 2' },
    { id: 3, lat: 1.3261783, lng: 103.8203441, name: 'location 3' }
  ];

  // 获取所有带#mapCanvas标记的元素
  @ViewChildren('mapCanvas') mapElements: QueryList<ElementRef>;
  maps: any[] = []; // 存储所有地图实例，方便后续操作

  constructor(private navCtrl: NavController) { }

  // 页面视图初始化完成后执行地图加载
  ngAfterViewInit() {
    // 遍历每个地图元素和对应的地点
    this.mapElements.forEach((mapEl, index) => {
      const location = this.locations[index];
      this.loadMap(mapEl.nativeElement, location.lat, location.lng);
    });
  }

  loadMap(mapElement: HTMLElement, lat: number, lng: number) {
    const latLng = new google.maps.LatLng(lat, lng);
    const mapOptions = {
      center: latLng,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // 初始化当前地图并存储到数组中
    const map = new google.maps.Map(mapElement, mapOptions);
    this.maps.push(map);

    // 添加标记
    new google.maps.Marker({
      map: map,
      animation: google.maps.Animation.DROP,
      position: map.getCenter()
    });
  }
}

关键说明 #

1. @ViewChildren的作用：它会返回一个QueryList，包含所有匹配#mapCanvas的DOM元素，正好对应ngFor生成的每个地图容器。
2. ngAfterViewInit生命周期：必须在这个钩子中初始化地图，因为此时所有DOM元素已经渲染完成，能确保获取到正确的地图容器。
3. 地图实例存储：把每个地图实例存入maps数组，方便后续对单个地图进行操作（比如修改中心点、添加标记等）。

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