[英]ionic 2/ Angular 2 - Fail to pass data from Google Maps InfoWindow to page
I am trying to pass data from Google Map InfoWindow
to Info Page
. 我正在尝试将数据从
Google Map InfoWindow
传递到Info Page
。 I am able to pass and access the data. 我能够传递和访问数据。 However, every time when the infoWindow is being reopen, the page will fire
i+1
, overlaying each other. 但是,每次重新打开infoWindow时,页面将触发
i+1
,相互重叠。
For example first time InfoWindow opened, Apply button
clicked , it will go to Info Page
. 例如,InfoWindow第一次打开,单击“
Apply button
,它将转到“ Info Page
。 Closing the InfoWindow and reopen it , click the Apply button
again, it will open the Info Page
twice and carry on incrementing by 1 if repeating the process. 关闭InfoWindow并重新打开它 ,再次单击“
Apply button
,它将打开Info Page
两次,如果重复该过程,则继续递增1。
Process: 处理:
Map -> markers created -> set content
variable -> create infoWindow-> set marker to open infoWindow when clicked -> infoWindow appear with the content -> click APPLY
on infoWindow -> direct to InfoPage
ONCE -> close InfoPage -> direct back to Map with infoWindow and content opened. 地图 - >标记创建 - >设置
content
变量 - >创建信息窗口 - >设置标记打开infoWindow时单击 - > infoWindow出现内容 - >单击APPLY
on infoWindow - >直接InfoPage
ONCE - >关闭InfoPage - >直接返回使用infoWindow进行映射并打开内容。 (Click Apply
will go to InfoPage
again but only ONCE ) -> close infoWindow -> Click on marker -> infoWindow shown. (单击
Apply
将再次转到InfoPage
,但仅限ONCE ) - > close infoWindow - >单击标记 - >显示infoWindow。 -> Click “ APPLY
in info window-> direct to “InfoPage” TWICE -> close go back to first InfoPage
-> close go back to map with infoWindow -> close info window , show map with markers. - >单击“在信息窗口中
APPLY
- >直接到”InfoPage“ TWICE - >关闭返回第一个InfoPage
- >关闭返回到infoWindow地图 - >关闭信息窗口,显示带标记的地图。 -> click on marker repeats, InfoPage
appear thrice . - >点击标记重复,
InfoPage
出现三次 。
Basically every time the InfoWindow
being closed and reopen again, the InfoPage
will increment by 1
. 基本上每次关闭
InfoWindow
并再次重新打开时, InfoPage
将increment by 1
。
What I seen form console.log
is that it will create another array when the InfoWindow
is reopened because the click eventlistener
is trigged. 我在
console.log
看到的是,当重新打开InfoWindow
时它会创建另一个数组,因为触发了click eventlistener
。 I had tried to use oneTime
function,run event once,and other methods but all failed. 我曾尝试使用
oneTime
函数,运行一次事件和其他方法,但都失败了。
Feel free to comment on the problem. 随意评论这个问题。 Any suggestions are appreciated.
任何建议表示赞赏。 Thanks in advance :)
提前致谢 :)
GoogleMapProvider.ts 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 Info.ts
ionViewDidLoad()
{
this.selectEntry(this.NP.get("record")); //getting the record
}
Manage to solve by using removeEventListener
使用
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.