Question

我正在使用传单api创建地图并在其上放置标记。我使用了一个简单的标记函数：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

html对象的numberIcon选项在创建时，即在循环之前被分配number的值。因此html是undefined。以后不会重新评估此分配，因此无论变量undefined变为什么，它都会保留在number。

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

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

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

有关这样做的示例，请参阅用户6502的答案。

Answer 2

作为一个疯狂的猜测你需要在循环中创建numberIcon对象......

var number;

for (i=0; i<points.length; i++) {
    number = '11';
    var numberIcon = L.divIcon({
        classname: "number-icon",
        iconsize: [25, 41],
        iconAnchor: [3, -40],
        html: number
    });
    L.marker(points[i], {icon: numberIcon}).addTo(map1);
}

L.maker可能是存储对象而不是制作浅层副本;在多次调用L.maker时重用相同的对象会产生奇怪的依赖关系。

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

2 个答案: