如何循环遍历坐标数组来为layerGroup创建地图标记

How to loop through an array of coordinates to create map markers for a layerGroup?

本文关键字：layerGroup 创建 地图 图标 数组 坐标 何循环 循环 遍历      更新时间：2023-09-26

下面是当前使用for循环的快速代码片段。我只取了地图的一部分作为例子:

链接

图片只是显示，就目前而言，我的代码在地图加载时自动显示所有灭火器——这不是我想要的。请阅读下面我的问题的详细版本。

    // 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);

正如你在上面看到的，这是我如何显示五年级班级的标记。当我在图层选择选项上点击"Fifth Grade"时(同时查看地图)，这三个标记弹出。这正是我想要的灭火器。

但是我想要一种更有效的方法，因为我有很多坐标。而对于五年级，我只有三个，所以我不介意逐个手动输入。

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

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

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

我希望这更有意义。我真的很感谢你在一天中抽出时间来帮助我!

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);
相关文章：