javascript - 在循环中填充 javascript 变量以用于循环外的图标定义

Question

我正在使用 leaflet api 创建 map 并在其上放置标记。我使用了一个简单的标记函数:https://dotscrapbook.wordpress.com/2014/11/28/simple-numbered-markers-with-leaflet-js/

所以这段代码有效:

var numberIcon = L.divIcon({
 classname: "number-icon",
 iconsize: [25, 41],
 iconAnchor: [3, -40],
 html: 11
});

for (i=0; i<points.length; i++)

{

L.marker(points[i], {icon: numberIcon}).addTo(map1);
}

但这不是(但我需要它，以便我可以在 for 循环中填充“number”变量，并将其发送回 numberIcon)。

var number;

var numberIcon = L.divIcon({
 classname: "number-icon",
 iconsize: [25, 41],
 iconAnchor: [3, -40],
 html: number
});

for (i=0; i<points.length; i++)

{
number = '11';

L.marker(points[i], {icon: numberIcon}).addTo(map1);
}

我的范围肯定不对。你有什么建议吗？谢谢!

Answer 1

您的 numberIcon 对象的 html 选项在创建时(即在您创建之前)被分配了 number 的值环形。所以html是未定义。此赋值稍后不会重新计算，因此无论变量 number 变成什么，它都保持为 undefined。

您可以尝试直接在循环中重新分配 html 选项 (numberIcon.options.html = '11')，以便您的标记创建其图标它将立即使用 html 的更新值。然而，正如用户 6502 所指出的，您的所有标记现在都使用完全相同的图标对象。因此，如果由于某种原因，其中一个标记需要重新创建其图标元素(例如，当标记从 map 中删除并添加回来时会发生这种情况)，它将读取 html 的最后一个值，这可能不是您想要的。

演示:http://jsfiddle.net/ve2huzxw/6/

通常建议在 Leaflet 中为每个标记实例化一个图标，以避免此问题。

请参阅用户 6502 的回答，了解这样做的示例。