Question

我有一张每两秒更新一次标记的地图。我使用第三方库来展示吐司信息。特定标记是错误的。我想让地图居中并在点击吐司时放大到特定标记。

这一切都适用于单个标记，但是当我有多个toast时，它们最终都显示最后一个标记（其中＆＃39;确实出错了）。我知道这是一个与js闭包和范围相关的问题，但我无法找到解决问题的方法。

if(/*something is wrong at marker*/) {
    if(toastShown.indexOf(i) == (-1))   // check if toast has been shown
    {
        toastShown.push(i);     // mark toast for current marker as shown
        var err = "Problem detected! Click to go to location";
        toastr.error(err, 'Error!', {timeOut: 10000});
        problemAtPoint.push(point);
        index++;
    }       
}

for( var j = 0; j < index; j++) {
    toastr.options.onclick = (function() {
        return function() {
            //alert('clicked!');
            map.setCenter(problemAtPoint[index]);
            map.setZoom(15);  
        }
    })(problemAtPoint[index]);
}

Answer 1

您必须考虑Javascript Closures是什么，请查看此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

这jsfiddle 显示了使用循环的示例

function setupHelp() {
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

    for (var i = 0; i < helpText.length; i++) {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
    }
}

你的问题似乎是你没有使用闭包参数

toastr.options.onclick = 
    (function(ITEM) {
       return function() {
           //alert('clicked!');
           map.setCenter(ITEM);
           map.setZoom(15);  
       }
})(problemAtPoint[index]);

Javascript：在循环中分配点击事件

1 个答案: