Google Maps API click eventListener выполняется несколько раз

Question

Я создаю плагин Google Maps для WordPress, на котором зарегистрированные или зарегистрированные пользователи могут размещать новые маркеры.

В моей функции initMap обратного вызова У меня есть следующие функции, которая регистрирует, когда пользователь нажимает на карте:

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); 
    }); 
} 

Как вы можете видеть щелчок на карте вызывает новую функцию placeMarkerAndPanTo что панорамирование выбранной точки к центру карты. После этого отображается модальное поле, позволяющее пользователям вводить некоторые данные в три поля ввода. При нажатии кнопки submit_modal все данные полей ввода хранятся в массиве, который используется в другой функции для вставки нового сообщения с использованием Ajax.

Этот код работает как шарм, сообщения добавляются в WordPress, а маркеры размещаются на карте.

Но этот процесс работает только по назначению впервые:

1. Щелкнув карту

2. Заполнение модальных полей

3. Нажмите кнопку представить модальное

Второй раз этот процесс выполняется ed, eventListener на моем submit_modal выполняется несколько раз после одного нажатия. Я попытался очистить массив и удалить событие click на моем submit_modal, когда он щелкнул, но это не помогло.

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

console.log('Map is clicked'); только регистрируется один раз каждый раз, когда карта щелкнул, но содержимое newPostData массива регистрируется в 3 раза. Это также приводит к добавлению в WordPress несколько раз. Как я могу исправить свою ошибку, что submit_modal обрабатывается только один раз?

Answer 1

Вы регистрируете одного и того же прослушивателя два или более раза. Для каждого звонка placeMarkerAndPanTo вы регистрируете прослушиватель событий нажатия для submit_modal.

Вы можете определить этот прослушиватель вне функции, но если вы сделаете это, вы не сможете достичь переменной latLng. Итак, сохраните latLng глобальной переменной в области placeMarkerAndPanTo. И определите submit_modal прослушиватель кликов вне функции, используя эту глобальную переменную (или скрытый ввод и т. Д.).