आयनिक 2/कोणीय 2 - Google मानचित्र से डेटा पास करने में विफलता InfoWindow पृष्ठ

Question

मैं Google Map InfoWindow से Info Page से डेटा पास करने का प्रयास कर रहा हूं। मैं डेटा पास और एक्सेस करने में सक्षम हूं। हालांकि, हर बार जब जानकारीविंडो फिर से खोल दिया जा रहा है, तो पृष्ठ i+1 को आग लगा देगा, एक-दूसरे को ओवरले कर देगा।

उदाहरण के लिए पहली बार InfoWindow खोला गया, Apply button क्लिक किया गया, यह Info Page पर जाएगा। InfoWindow को बंद करना और इसे फिर से खोलना, Apply button पर दोबारा क्लिक करें, यह Info Page दो बार खुल जाएगा और प्रक्रिया को दोहराने पर 1 से बढ़ोतरी करेगा।

प्रक्रिया:

मानचित्र -> मार्कर बनाया ->content चर सेट -> infoWindow खोलने के लिए infoWindow- बनाने> मार्कर सेट क्लिक किया जब -> infoWindow पर APPLY क्लिक करें - -> infoWindow सामग्री के साथ प्रदर्शित> प्रत्यक्ष करने के लिए InfoPageONCE -> बंद जानकारी -> जानकारी के साथ मानचित्र पर वापस जाएंविंडो और सामग्री खोला गया। (Apply पर क्लिक करें InfoPage पर फिर से ONCE) ->नज़दीकी जानकारीविंडो -> मार्कर -> infoWindow पर क्लिक करें। -> सूचना विंडो में "APPLY" पर क्लिक करें-> "InfoPage" पर सीधे TWICE -> पहले InfoPage पर वापस जाएं -> जानकारी के साथ मानचित्र पर वापस जाएं विन्डो -> बंद जानकारी विंडो, मार्कर के साथ मानचित्र दिखाएं। -> मार्कर दोहराने पर क्लिक करें, InfoPageतीन बार दिखाई दें।

असल में हर बार InfoWindow बंद होने और फिर से खोलने के बाद, InfoPageincrement 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); 

});