3

Ich schrieb eine kleine Website mit HTML + js + jquery und verwendet die Google Maps API v3. Auf der Karte können Sie eine Polylinie zeichnen, was aufgrund von Event-Handlern auf der Karte möglich ist, z.Google Maps Zuhörer nicht richtig arbeiten in angular2 + Typoskript

map.addListener('click', addLatLng); 

und

function addLatLng(event) { 
    // Add a new marker at the new plotted point on the polyline. 
    polyline.getPath().push(event.latLng); 

    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     draggable: true, 
     map: map, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 5 
     } 
    }) 

    var i = gmarkers.length; 
    marker.addListener('drag', function() { 
     polyline.getPath().setAt(i, marker.getPosition()); 
    }); 
... 
} 

Jetzt möchte ich diese Seite in eine andular2 Komponente übersetzen. Ich weiß, dass die Ereignisbehandlung sollte vielleicht nicht in dieser Art und Weise durchgeführt werden, aber ich weiß nicht, wie es sonst zu tun ...

ich die erste Zeile ändern

this.map.addListener('click', (event) => this.addLatLng(event)); 

und dies funktionieren wird wie beabsichtigt. ABER (!)

addLatLng(event) { 
    // Add a new marker at the new plotted point on the polyline. 
    this.polyline.getPath().push(event.latLng); 

    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     draggable: true, 
     map: this.map, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 5 
     } 
    }) 


    var i = this.gmarkers.length; 

    marker.addListener('drag',() => function() { 
    // this.polyline.getPath().setAt(i, marker.getPosition()); 
     console.log("drag listening"); 

    }); 
    ... 
} 

wird nicht funktionieren. Ich verstehe nicht, warum der Eventlistener zur Karte hinzugefügt werden kann, aber nicht zum Marker auf dieser Karte. Liegt es daran, dass der neue Listener innerhalb der Eventhandling eines anderen Elements hinzugefügt wird? Aber wenn ja, warum funktioniert es in reinem Javascript?

+0

Haben Sie einen Fehler oder ist der Event-Handler genannt einfach nicht? –

+0

Es heißt einfach nicht – Stubbi

Antwort

3

Sie verkorkste dieses:

marker.addListener('click',() => function() { 
    // this.polyline.getPath().setAt(i, marker.getPosition()); 
    console.log("drag listening"); 
}); 

Es ist wie es sein sollte:

marker.addListener('drag',() => { 
    // this.polyline.getPath().setAt(i, marker.getPosition()); 
    console.log("drag listening"); 
}); 

Dieses Konstrukt

() => {} 

ein Pfeil-Funktion ist. Und wenn es keine {} gibt, wird nur der Wert nach => zurückgegeben.

Sie haben also eine Funktion erstellt, die eine Funktion zurückgegeben hat.

Mehr Informationes hier: https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

+0

ah, das ist der Trick! Ich danke dir sehr! Übrigens. Es ist ein Klick, aber ziehen Sie natürlich auch dorthin. Es war falsch in der Frage. – Stubbi

+0

@Stubbi Sie sind herzlich willkommen;) – Dinistro

Verwandte Themen