Question

我正在为WordPress构建Google地图插件，注册/登录的用户可以在其中放置新标记。

在我的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中，并且标记会放置在地图上。

但这个过程只能在第一时间按预期运行：

点击地图
填写模态字段
按下模式的提交按钮

第二次执行此过程时，我的submit_modal上的eventListener会在一次单击后多次执行。我已经尝试清除数组并在点击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注册Click事件侦听器。

您可以在功能之外定义此侦听器，但如果您这样做，则无法访问latLng变量。因此，将latLng存储到placeMarkerAndPanTo范围内的全局变量中。并使用此全局变量（或隐藏的输入等）在函数外部定义submit_modal单击侦听器。

Google Maps API点击eventListener多次执行

1 个答案: