用于从对象数组创建数组的 Vanilla Javascript

Question

var cityMarkers = [
    {
        id: "bliss",
        name: "Principality of Bliss",
        icon: cityIcon,
        coords: [-90.19, -76.90]
    },
    {
        id: "cantonia",
        name: "Grand City of Cantonia",
        icon: cityIcon,
        coords: [-39.513421, -69.09375]
    },
    {
        id: "mithril",
        name: "Grand City of Mithril ",
        icon: cityIcon,
        coords: [42, -102.5]
    }];

I have the above in a separate file for referencing from my app.js file.

  cityMarkers.forEach(function(item) {
      var marker = L.marker(item.coords, {icon : item.icon});
      marker.bindTooltip("<b>" + item.name + "<b>", {permanent: true, offset: 
  [60, 0]});

This will make the markers and the other properties, but it won't put them on the map. An array handles placing them on the map, so this doesn't help me much with what I am really trying to do.

This is a map based on the leaflet library. I am trying to assign a variable to each city with the id. Then, after the markers are made and attached to their variables, I want to make an array out of those names to function as the data layer. I admit that I am out of my depth, here. Any guidance would be most appreciated. I linked the documentation below in case anyone wants it.

https://leafletjs.com/reference-1.3.4.html

I did research the question, but I was unable to find any results that answered what I think I am asking. I would highly prefer a nudge over a flat answer. I don't understand how to instantiate the variables and bind them to the markers. Thank you for your time.

Answer 1

Instead of adding the markers directly to the map, add them to a L.layerGroup . You can add the layerGroup to the map and remove it again at will.

var lg = new L.layerGroup();
cityMarkers.forEach(function(item) {
      var marker = L.marker(item.coords, {icon : item.icon});
      marker.bindTooltip("<b>" + item.name + "<b>", {permanent: true, offset: 
  [60, 0]})
  .addTo(lg)});

lg.addTo(map);       // Add the layerGroup the map
lg.removeFrom(map);  // Remove the layerGroup from the map

Answer 2

I think you can try adding .addTo(map)

cityMarkers.forEach(function(item) {
  var marker = L.marker(item.coords, {icon : item.icon});
  marker
    .bindTooltip("<b>" + item.name + "<b>", {permanent: true, offset: [60, 0]})
    .addTo(map);

Demo for adding multiple markers to leaflet.