如何在 Leaflet Map 上显示第二个图标？

Question

我无法弄清楚如何在 Leaflet 地图上显示两个带有弹出数据的单独图标。 我编写的代码可以在同一层上同时显示其中一个但不能同时显示两个。

这是我的代码：

var map = L.map("map", { scrollWheelZoom: false }).setView(
  [3.143363, 101.712346],
  12
);
new L.Control.Zoom({ position: "bottomleft" }).addTo(map);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ["a", "b", "c"],
}).addTo(map);

var myURL = jQuery('script[src$="leafmalaymap1.js"]')
  .attr("src")
  .replace("leafmalaymap1.js", "");

var myIcon = L.icon({
  iconUrl: myURL + "tower2.png",
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14],
});

for (var i = 0; i < markers.length; ++i) {
  L.marker([markers[i].latitude, markers[i].longitude], { icon: myIcon })
    .bindPopup(
      'Location: <span class="mapbold">' +
        markers[i].area +
        '</span><br>Hill LRD: <span class="mapbold">' +
        markers[i].hillLrd +
        '</span><br>NE Site Name: <span class="mapbold">' +
        markers[i].neSiteName +
        '</span><br>NE Latitude: <span class="mapbold">' +
        markers[i].latitude +
        '</span><br>NE Longitude: <span class="mapbold">' +
        markers[i].longitude +
        '</span><br>NE Site Address: <span class="mapbold">' +
        markers[i].siteAddress +
        "</span><br>"
    )
    .addTo(map);
}

var myIcon = L.icon({
  iconUrl: myURL + "tower3.png",
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14],
});

for (var o = 0; o < markers.length; ++o) {
  L.marker([markers[o].latitude2, markers[o].longitude2], { icon: myIcon })
    .bindPopup(
      'Bax LRD: <span class="mapbold">' +
        markers[o].feBaxLrd +
        '</span><br>Baxis Latitude: <span class="mapbold">' +
        markers[o].latitude2 +
        '</span><br>Bax Longitude: <span class="mapbold">' +
        markers[o].longitude2 +
        '</span><br>Bax FE Site Address: <span class="mapbold">' +
        markers[o].feSiteAddress +
        "</span><br>"
    )
    .addTo(map);
}

如果我更改[markers[i]和[markers[o]的顺序，两者都将独立工作，但不会同时显示。

我试过在 Stackoverflow 上搜索，但没有出现相关问题。 非常感谢一些关于我需要对此 JS 脚本进行哪些更改才能使其工作的指导

Answer 1

我犯了两次定义“myIcon”的错误，并通过将第二个“myIcon”更改为“myIcone”并将第二个 [markers[i] 更改为 [markers[o] 解决了这个问题，这一切都奏效了。 非常感谢 IvanSanchez，他为我指明了正确的方向