2017-10-14 4 views
1

Hallo, ich versuche ein Ereignis von einer Schaltfläche in einem Google Maps Infowindow abzufeuern. das Problem ist, dass ich es nicht irgendwie feuern kann.Ionic 2 click event innerhalb von infowindow googlemaps

addMarket(latitud, longitud, sensorData) { 

let marker = new google.maps.Marker({ 
    draggable: false, 
    position: { lat: latitud, lng: longitud }, 
    map: this.map,//set map created here 
    title: sensorData.sensor 
}); 
marker.addListener('click', function() { 
    infowindow.open(this.map, marker); 
}); 

let bodyMessege = 'Nombre del Sensor: ' + sensorData.sensor + '<br>' + 
    'Componente Descripcion: ' + sensorData.componentDesc + '<br>' + 
    ' description: ' + sensorData.description + '<br>' + 
    ' Tipo de sensor: ' + sensorData.type + '<br>' + 
    ' Unidad de sensor: ' + sensorData.unit + '<br>' + 
    'Tipo de dato: ' + sensorData.dataType + '<br>' + 
    ' <button ion-button (click)="this.navCtrl.push(DetalleSensorPage)" >Default</button>'; 

//  ' <button ion-button="" onclick=console.log("log");' anda 
//this.pushPage=DetalleSensorPage; 
var infowindow = new google.maps.InfoWindow({ 
    content: bodyMessege 
}); 

Jede mögliche Spitze willkommen Dank sein. :)

+0

Ich konnte es lösen, aber ich bin mir nicht sicher, ob es das gleiche Szenario ist. An meinem Ende bestand die Anforderung darin, nur _eine Info-Ansicht zur Zeit _ anzuzeigen und einen Knopf darin einzufügen. Wenn Sie also zum ersten Mal eine Infoansicht öffnen und dann auf einen anderen Marker klicken, wird die erste Infoansicht geschlossen und nur die neue angezeigt. Wäre das in Ordnung? – sebaferreras

+0

Es ist die gleiche Anforderung, dass nur ein Popup zu einer Zeit angezeigt wird, wenn eine Markierung gedrückt wird, zeigt ein Infofenster Informationen an und hat eine Schaltfläche, um zu einer anderen Seite umzuleiten, die mehr Details zeigt. Ich habe versucht, eine Funktion von der Schaltfläche aus aufzurufen, aber ich kann nicht einmal ein Konsolenprotokoll zum Laufen bringen. –

+0

Wenn es hilfreich ist, können Sie [https://github.com/philipbrack/paystumped_ionic2fullapp/blob/master/src/pages/map-content/map-content.ts] [Code ansehen] für eine ähnliche Implementierung, wo ich Öffnen Sie InfoWindow, wenn Sie auf eine Region einer Karte klicken. FYI das ist auch eine Ionic 2 App. –

Antwort

0

Ich habe diese Lösung für mein eigenes Projekt gefunden: (https://forum.ionicframework.com/t/ng-click-in-google-maps-infowindow/5537/6)

Das Schlüsselelement ist die id = „tap“, die Sie am getElementbyId unten suchen.

let content = '<div class="infowindow"><p id="tap">your text here</p></div>'; 

let infoWindow = new google.maps.InfoWindow(
    { 
    closeBoxURL: "", 
    content: content 
    } 
); 
infoWindow.open(this.map, marker); 

google.maps.event.addListenerOnce(infoWindow, 'domready',() => { 
    document.getElementById('tap').addEventListener('click',() => { 
    //alert('Clicked'); 
    console.log("touch"); 
    this.closeInfoViewWindow(infoWindow); 
    this.openEventDetailModal(event); 
    }); 
}); 

hoffe das wird dir und anderen helfen.

Verwandte Themen