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

Question

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

例如,InfoWindow第一次打开,Apply button点击,它会转到Info Page.关闭InfoWindow并重新打开它,Apply button再次单击它,Info Page如果重复该过程,它将打开两次并继续递增1.

处理:

地图 - >标记创建 - >设置content变量 - >创建infoWindow->设置标记打开infoWindow点击 - > infoWindow出现内容 - >点击APPLYinfoWindow - >直接到InfoPage ONCE - >关闭InfoPage - >直接返回到地图infoWindow和内容已打开.(单击Apply将InfoPage再次转到但仅限ONCE) - > 关闭infoWindow - >单击标记 - >显示infoWindow.- >点击" APPLY在信息窗口 - >直接到"InfoPage" TWICE - >关闭回到第一个InfoPage- >关闭回到地图用infoWindow - >关闭信息窗口,显示带标记的地图.- >点击标记重复,InfoPage出现三次.

基本上每次InfoWindow关闭并重新打开时,InfoPage意志increment by 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);

});