javascript - 如何循环遍历坐标数组来为图层组创建 map 标记？

Question

这是当前的一个快速片段——使用 for 循环。我只取了一张图来举例:

link

图片只是显示，截至目前，我的代码在 map 加载后立即自动显示所有灭火器 - 这不是我想要的。请阅读下面的内容，了解我的问题的详细版本。

    // Fifth Grade class teachers //

    var blower = L.marker([-38.68551, -44.12109], {icon: fiveTeacherIcon}).bindPopup('Mrs. Blower\'s class'),
        okonowski = L.marker([-55.47885, -43.41797], {icon: fiveTeacherIcon}).bindPopup('Mrs. Okonowski\'s class'),
        vermeulen = L.marker([-38.95941, -23.37891], {icon: fiveTeacherIcon}).bindPopup('Mrs. Vermeulen\'s class');

var fifthGrade = L.layerGroup([blower, okonowski, vermeulen]);

var classesOverlay = {
    "Kindergarten": kindergarten,
    "First Grade": firstGrade,
    "Second Grade": secondGrade,
    "Third Grade": thirdGrade,
    "Fourth Grade": fourthGrade,
    "Fifth Grade": fifthGrade
};

L.control.layers(classesOverlay).addTo(cmap);

正如您在上面看到的，这就是我显示五年级类(class)标记的方式。当我单击图层选择选项上的“五年级”时(在查看 map 时)，会弹出这三个标记。这正是我想要的灭火器。

但由于我有很多坐标，我想要一种更有效的方法来做到这一点。而五年级时我只有三个，所以我不介意单独手动输入它们。

所以我的问题基本上是问是否有更有效的方法来做到这一点。正如我上面所示，我目前让它在数组中运行一个 for 循环并将它们放置到 map 上，但问题是我不希望灭火器一直显示；我希望它们就像我五年级(显然还有其他年级)一样，我只需从图层组中选择它们，然后它们就会全部出现。

我只是不想为灭火器的每组坐标单独做一个标记，因为我觉得这真的适得其反。

我不知道如何制作它，所以当选择它时，它将运行 for 循环并显示所有内容；当我尝试时，它最终只显示一组坐标。

我希望这更有意义。我真的很感谢您抽出宝贵的时间来帮助我!

Answer 1

function createMarker (coords) {

    return (new L.marker(coords, {icon: fireEx}).bindPopup('<strong>Hi! I\'m a fire extinguisher! And you are?</strong>').addTo(cmap));
}

function createMarkerGroup (markerLocationList) {
    var
        markerList = [];

    markerLocationList.forEach(function (location) {

        markerList.push(createMarker(location));
    });

    return L.layerGroup.apply(L.layerGroup, markerList);
}


var extinguishers = [
    [71.52491, -17.75391],
    [71.69129, 0.35156],
    [60.84491, -56.25],
    [49.49667, -14.41406],
    [10.66061, -33.75],
    [11.3508, -10.01953],
    [-21.45307, -22.5],
    [-50.1769, -60.46875],
    [-49.49667, -27.94922],
    [-59.88894, 36.03516],
    [-48.80686, 47.10938],
    [-49.15297, 84.72656],
    [-49.15297, 84.72656],
    [-48.80686, 47.10938]
];
var fireExtinguishers = createMarkerGroup(extinguishers);