Google maps ionic使用ngFor在一个页面中显示多个谷歌地图

我有一个包含纬度和经度的数组列表

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 }
];

现在，我想使用ionic ngFor显示每个位置的google地图

<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>

但是，我不知道如何在ngFor中引用或加载映射到其相应的div

---

我希望有人能帮助我在ngFor中显示地图：Id根据定义是唯一的，请改用class，除非循环使用HTML元素，否则ViewChild在这种情况下是不合适的。你能做的就是迭代你的地图

不要浪费你的时间：我在手机上，所以写短信有点麻烦，希望你能成功解决你的问题。您可以同时使用id，但必须为每个map或my class方法更改id，以便始终使用相同的类名，如果是这样的话：

使用有效的解决方案进行编辑： （在这里做的）

函数myMap（）{
var-maps=document.getElementsByClassName（“谷歌地图”）；
变量选项={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：5，
};
对于（var i=0；i实际上，我不明白，如果是这样的话，你的html应该是什么样子？我们如何显示地图？它永远不会改变的经典方式：你的html代码很好，只需应用我的修复程序，这样你就可以确保你已经初始化了所有的地图
mapIndex={[key:number]：any}
来自哪里？这是一个错误
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-locations',
  templateUrl: 'locations.html',
})
export class LocationsPage {

  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 }
  ];
  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(private navCtrl: NavController) {
  }

  loadMap(lat, lng) {
    let latLng = new google.maps.LatLng(lat, lng);
    let mapOptions = {
      center: latLng,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: this.map.getCenter()
    });
  }
}

<div class="googleMap" style="width:100%;height:400px;"></div>
<div class="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {

var maps = document.getElementsByClassName("googleMap");

var options= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};

for (var i=0; i<maps.length; i++) {
    console.log(maps[i]);
    var map=new google.maps.Map(maps[i],options);
};

}
</script>