javascript - ionic 2/Angular 2 - 无法将数据从 Google Maps InfoWindow 传递到页面

Question

我正在尝试将数据从 Google Map InfoWindow 传递到 Info Page。我能够传递和访问数据。但是，每次重新打开 infoWindow 时，页面都会触发 i+1，相互叠加。

例如，第一次打开信息窗口时，点击应用按钮，它将转到信息页面。 关闭InfoWindow并重新打开，再次点击Apply按钮，会打开两次Info Page，如果重复则继续加1过程。

过程:

map -> 创建标记 -> 设置 content 变量 -> 创建 infoWindow -> 设置标记以在单击时打开 infoWindow -> infoWindow 随内容一起出现 -> 单击 APPLY 在 infoWindow 上 -> 直接到 InfoPage ONCE-> 关闭 InfoPage -> 直接返回 Map 并打开 infoWindow 和内容。 (点击 Apply 将再次进入 InfoPage 但只有 ONCE) -> close infoWindow -> 点击 marker -> 信息窗口显示。 -> 点击信息窗口中的“APPLY”-> 直接进入“InfoPage” TWICE -> 关闭返回第一个InfoPage -> 关闭返回使用 infoWindow 进行映射 -> 关闭信息窗口，显示带有标记的 map 。 -> 点击标记重复，InfoPage 出现三次。

基本上每次 InfoWindow 关闭并再次打开时，InfoPage 都会递增 1。

我从 console.log 中看到的是，当 InfoWindow 重新打开时，它将创建另一个数组，因为 click eventlistener 被触发。我曾尝试使用 oneTime 函数，运行事件一次，以及其他方法，但都失败了。

欢迎对问题发表评论。任何建议表示赞赏。提前致谢:)

GoogleMapProvider.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { App } from 'ionic-angular';

  constructor(
  public http: Http,
  public app:App, 
  ) {
  }

 addMarker(lat: any, lng: any , listingID:any): void {

let latLng = new google.maps.LatLng(lat, lng);

let marker = new google.maps.Marker({
  map: this.map,
  animation: google.maps.Animation.DROP,
  position: latLng,

});   

this.markers.push(marker);

  this.addInfoWindow(marker,listingID);

}

addInfoWindow(marker,listingID){

this.http.get('http://localhost/infoWindow.php?id=' + listingID)
  .map(res => res.json())
  .subscribe(Idata => {

    let infoData = Idata;

      let content = "<ion-item>" + 
     "<h2 style='color:red;'>" + infoData['0'].ListingTitle + "</h2>" + 
     "<p>" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingTime + "</p>" +
     '<p id="' + infoData['0'].ListingID + '">Apply</p>'
     "</ion-item>";    

 let infoWindow = new google.maps.InfoWindow({
 content: content
 });

  google.maps.event.addListener(infoWindow, 'domready', () => {

  let goInfoPage = document.getElementById(infoData['0'].ListingID);

  goInfoPage.addEventListener('click', () => {

    let pushData = infoData['0'];

    let nav = this.app.getActiveNav();

    nav.push('InfoPage',{'record':pushData});

   })
});

google.maps.event.addListener(marker, 'click', () => {

infoWindow.open(this.map, marker); 

  });

});

}

Info.ts

ionViewDidLoad()
{
     this.selectEntry(this.NP.get("record")); //getting the record
}

Answer 1

设法使用removeEventListener解决

  google.maps.event.addListener(infoWindow, 'domready', () => { 

  let goInfoPage = document.getElementById(infoData['0'].ListingID);

 const onClick = () => {

    let pushData = infoData['0'];

    let nav = this.app.getActiveNav();

    nav.push('InfoPage',{'record':pushData});

    goInfoPage.removeEventListener('click', onClick);
  }


    goInfoPage.addEventListener('click',onClick);

});