Ionic 2 Angular 2 Google Maps 从数据库坐标中添加多个标记

Posted 2023-03-13

【中文标题】Ionic 2 Angular 2 Google Maps 从数据库坐标中添加多个标记

【英文标题】：Ionic 2 Angular 2 Google Maps Adding multiple markers from database coordinates

【发布时间】：2017-08-03 16:07:09

【问题描述】：

我正在尝试在我的原生 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

目前，long 和 lat 数字是由坐标组成的。我有一个包含用户电子邮件、经纬度和经度数据的位置数据库。我的控制台日志中有这些数据：

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

【参考方案1】：

假设 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);
);

棘手的部分是传递给 Marker 构造函数的对象的 __infowindow 字段。这是避免 JS 错误的一种解决方法——即如果我们使用let infowindow =...，则该变量将在 for 循环之后被销毁；如果我们使用 var infowindow = ...，它将被设置为在 for 循环中创建的 last 信息窗口。

我还没有测试过这个确切的代码，但确实很相似，而且它可以工作。

作为奖励，我添加了以下说明：

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

这样，一旦您添加了所有标记，地图就会自动调整大小以适应所有标记；-)。