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

Question

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

onclick 函数向我的 API 发送一个请求，该请求将 return 与被点击的标记关联的“轨迹”数据。最后这个数据被注入到我的 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;
}

Answer 1

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

那么你的问题是如何知道id。给marker加上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
    };
    ...

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

Leaflet map marker onclickevent not working as intended

html

javascript

laravel

leaflet

leaflet.markercluster