谷歌地图信息窗口卡住了第一个标记信息

时间:2019-05-08 09:05:08

标签: google-maps ionic4

我正在开发Ionic应用程序。我的应用程序是从USGS获取数据json api地震,然后在Google地图上设置坐标。我正在遍历数组以创建标记和信息窗口,但是即使单击其他图标,信息窗口也始终附加到第一个标记信息上!

export class HomePage implements OnInit {
  protected points: { lng: number, lat: number }[] = [];

  items: any
  pet: string = "Today";
  map: GoogleMap;
  mags: number;

  constructor(
    private http: HTTP) {

  }

  async ngOnInit() {

    this.getData()

  }

  async getData() {

   this.http.get(`https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson`, {}, {}).then(data => {

 this.items = JSON.parse(data.data)
      let earth = JSON.parse(data.data)

      console.log(this.items)

      let htmlInfoWindow = new HtmlInfoWindow();

      for (let datas of earth['features']) {

        this.points.push({ lng: datas.geometry.coordinates[0], lat: datas.geometry.coordinates[1] });

        let mag = datas.properties.place
        let title = datas.properties.title

       /// Marker icon

        let dest = this.points.map((coords) => {
          return this.map.addMarker({
            position: coords,
            icon: this.mags_icons
          }).then((marker: Marker) => {

            marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
              htmlInfoWindow.open(marker);
            });

          });
        });

        let frame: HTMLElement = document.createElement('div');
        frame.innerHTML =
          '<h3>' + mag + '</h3>',
          '<p>' + title + ' </p>';

        frame.addEventListener("click", (evt) => {

        });
        htmlInfoWindow.setContent(frame, {
          width: "170px"
        });


        this.map = GoogleMaps.create('map_canvas');
      }

    })
  }

}

有什么想法吗?

0 个答案:

没有答案