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]
    }];

我将以上内容保存在一个单独的文件中，可从我的app.js文件中引用。

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

这将创建标记和其他属性，但不会将其放置在地图上。数组可以将它们放置在地图上，因此这对我真正想做的事情没有多大帮助。

这是基于传单库的地图。我正在尝试为每个具有ID的城市分配一个变量。然后，在制作完标记并将其附加到变量之后，我想用这些名称组成一个数组以用作数据层。我承认，我不在这里。任何指导将不胜感激。如果有人需要，我链接了下面的文档。

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

我确实研究了这个问题，但是我找不到任何能回答我所问问题的结果。我非常希望轻推而不是简单的答案。我不明白如何实例化变量并将其绑定到标记。谢谢您的宝贵时间。

Answer 1

与其将标记直接添加到地图，不如将其添加到L.layerGroup。您可以将layerGroup添加到地图，然后随意将其删除。

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

我认为您可以尝试添加.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.

用于从对象数组创建数组的香草Javascript

2 个答案: