传单地图标记 onclickevent 无法按预期工作

问题描述

我为数组“starts”中的每个元素添加了一个标记“beginPoint”。初始化网页时，onclick 函数会按顺序为每个标记运行，而我没有点击它们（这不是故意的）。

onclick 函数向我的 API 发送请求，该请求将返回与被点击的标记相关联的“轨道”的数据。最后这个数据被注入到我的 html 页面中。

因此，我的问题是，当我点击一个制造商时，onclick 功能似乎没有触发，但在为所有制造商加载页面时运行。提前致谢！

    //marker at the beginning of each track
    var starts = Object.values(starts);
    starts.forEach(function (element){
        var latlng = new L.LatLng(element.Latitude,element.Longitude);
        var beginPoint = L.marker(latlng,{icon:beginIcon}).addTo(mymap);
        beginPoint.on('click',onClick(element.id));
    });

}

//function called when clicking on marker @home
function onClick(e) {

    var request = {
      id: e
    };

    var url = "api/tracks/select"

    fetch(url,{
            method: 'post',headers: {'Content-type':'application/json'},body: JSON.stringify(request)
        }
    )
        .then(response => response.json())
        .then(json => insertTrackDetails(json));
}

// set the data corresponding to the selected track
// to the details field in the home view
function insertTrackDetails(data){

    var data = Object.values(data);
    var image = data[0].image;
    image = image.replace('public/images','/storage/images');

    document.getElementById('pills-detail').innerText = data[0].description;
    document.getElementById('pills-image').src = image;

    //Todo document.getElementById('pills-comments').innerText = data.description;
}

解决方法

当您使用 .on() 在 () 中添加函数时，它会立即执行，而不是在单击时执行。 所以把这个beginPoint.on('click',onClick(element.id));改成这个 beginPoint.on('click',onClick);

那么你就遇到了如何知道 id 的问题。将 id 添加到标记中，然后读出：

starts.forEach(function (element){
        var latlng = new L.LatLng(element.Latitude,element.Longitude);
        var beginPoint = L.marker(latlng,{icon:beginIcon}).addTo(mymap);
        beginPoint.elmId = element.id; // store the id on the marker
        beginPoint.on('click',onClick);
    });
...


//function called when clicking on marker @home
function onClick(e) {
    var id = e.target.elmId; // readout the id from the marker
    var request = {
      id: id
    };
    ...