Google Maps API click eventListener wird mehrfach ausgeführt

Question

Ich baue ein Google Maps Plugin für WordPress, auf dem registrierte/eingeloggte Benutzer neue Marker setzen können.

In meiner initMap Callback-Funktion habe ich die folgende Funktion, die registriert, wenn ein Benutzer auf der Karte klickt:

google.maps.event.addListener 
map.addListener('click', function(e) { 
    placeMarkerAndPanTo(e.latLng, map); 
}); 

function placeMarkerAndPanTo(latLng, map) { 
    // logged only once 
    console.log('Map is clicked'); 

    // center clicked point on map 
    map.panTo(latLng); 

    // display modal box 
    document.getElementById("modal").style.display = "block"; 

    // add click listener to submit button of the modal box 
    document.getElementById("submit_modal").addEventListener("click", function() { 

     // store values of input fields in variables 
     var text_1 = document.getElementById("text_1").value; 
     var text_2 = document.getElementById("text_2").value; 
     var text_3 = document.getElementById("text_3").value; 

     // store variables into array with the defined WordPress action 
     var newPostData = { 
      action: 'insert_new_post', 
      some: text_1, 
      added: text_2, 
      data: text_3, 
      location: latLng, 
     }; 

     // logged multiple times 
     console.log(newPostData); 

     // pass array to a new function that processes the array using Ajax 
     placeNewMarker(newPostData); 
    }); 
} 

Wenn Sie den Klick auf der Karte sehen können, ruft eine neue Funktion placeMarkerAndPanTo, die den klickten Punkt Pfannen in die Mitte der Karte. Danach wird eine modale Box angezeigt, damit Benutzer einige Daten in drei Eingabefelder eingeben können. Wenn die Schaltfläche submit_modal gedrückt wird, werden alle Daten der Eingabefelder in einem Array gespeichert, das in einer anderen Funktion verwendet wird, um einen neuen Beitrag mit Ajax einzufügen.

Dieser Code funktioniert wie ein Charme, Beiträge zu WordPress hinzugefügt und Markierungen werden auf der Karte platziert.

Aber dieser Prozess funktioniert nur, wie beabsichtigt ersten Mal: ​​

1. Ein Klick auf die Karte

2. Füllung in den modalen Feldern

3. Drücken Sie die Senden-Schaltfläche des modalen

Das zweite Mal, dass dieser Prozess ausgeführt wird ed, der EventListener auf meinem submit_modal wird mehrmals nach einem Klick ausgeführt. Ich habe versucht, das Array zu löschen und das Klickereignis auf meinem submit_modal zu entfernen, wenn es geklickt wird, aber es half nicht.

newPostData = []; 
document.getElementById("submit_modal").removeEventListener("click", this); 

console.log('Map is clicked'); wird nur protokolliert, jedes Mal, wenn die Karte geklickt wird, aber der Inhalt des newPostData Array 3 mal angemeldet. Dies führt auch dazu, dass WordPress mehrmals hinzugefügt wird. Wie kann ich meinen Fehler beheben, dass die submit_modal nur einmal bearbeitet wird?

Answer 1

Sie registrieren denselben Listener zweimal oder öfter. Für jeden Anruf placeMarkerAndPanTo registrieren Sie Click-Ereignis-Listener für submit_modal.

Sie können diesen Listener außerhalb der Funktion definieren, aber wenn Sie das tun, können Sie die Variable latLng nicht erreichen. Speichern Sie daher die latLng globale Variable im Bereich placeMarkerAndPanTo. Und definieren Sie submit_modal klicken Hörer außerhalb der Funktion, mit dieser globalen Variable (oder versteckte Eingabe usw.).