Angularjs Ionic 2 Angular 2谷歌地图从数据库坐标添加多个标记

我正在尝试在我的本地Ionic 2应用程序的地图上放置多个标记

    //Connecting to locations database
    this.db.connect();
    let locations = this.db.collection('locations');

    //Retrieving all the locations of users from database
    locations.fetch().subscribe(msg => console.log(msg));

    //loop through all the locations, adding markers at each position
    for (let i = 0; i < 10; i++) {

        let pin = locations[i];
        let location: any;

        let marker = new google.maps.Marker({
                map: this.map,
                animation: google.maps.Animation.DROP,
                position : {"lat": 2433, "lng": 234}
        });

        //Content displayed in window on Map
        let content = 
        //User profile information
        '<h3>Name: </h3>' + this.user.details.name + 
        '<h3>Email: </h3>' + this.user.details.email + 
        '<h3>Image: </h3>' + '<img src='+this.user.details.image+'>' +
        '<button id="sendRequest()" (click)>Request Walk</button>';

        this.addInfoWindow(marker, content);
    }
    //end of locations loop

//连接到位置数据库
this.db.connect（）；
let locations=this.db.collection（'locations'）；
//从数据库检索用户的所有位置
locations.fetch（）.subscribe（msg=>console.log（msg））；
//在所有位置循环，在每个位置添加标记
for（设i=0；i<10；i++）{
设pin=位置[i]；
出租地点：任何；
让marker=new google.maps.marker({
map:this.map，
动画：google.maps.animation.DROP，
位置：{“lat”：2433，“lng”：234}
});
//地图窗口中显示的内容
让内容=
//用户配置文件信息
“名称：”+this.user.details.Name+
“电子邮件：”+this.user.details.Email+
'图像：'+''+
“请求步行”；
此.addInfo窗口（标记、内容）；
}
//位置循环结束

目前，long和lat图形由坐标组成。我有一个包含用户电子邮件、lat和lng数据的位置数据库。我的控制台日志中有以下数据：

---

我想知道如何访问此数据并使用它在地图上绘制多个不同的标记。

假设

msg

变量是您在粘贴的图片中转储的变量，您应该在获得所有记录后循环记录，例如：

locations.fetch().subscribe(msg:Array => {
  var bounds = new google.maps.LatLngBounds();

  for (let record of msg) {    
    var marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: { lat: record.lat, lng: record.long }
      __infowindow: new google.maps.InfoWindow({
        content: '<h3>Email: </h3>' + record.email;
      })
    });

    marker.addListener('click', ()=>{
      // this- here -is the marker
      // this.map means marker.map, we are lucky it's the same as ...Page.map
      this.__infowindow.open(this.map, this);
    });
    bounds.extend(marker.getPosition());
  }
  this.map.fitBounds(bounds);
});

因此，添加所有标记后，地图将自动调整大小以适应所有标记；-）

var bounds = new google.maps.LatLngBounds();
...
bounds.extend(marker.getPosition());
...
this.map.fitBounds(bounds);