如何在传单中定义多个自定义图标？

Question

我尝试将自定义图标添加到传单地图。

<% for (let a=0; a<pointers.length; a++) { %>

  switch ("<%-pointers[a].department%>") {
    case "departmentX":
      L.marker([<%-pointers[a].geolocation%>]);
      var icon = L.icon({iconUrl: '/img/photo1.png'});
      break;
    case "departmentY":
      L.marker([<%-pointers[a].geolocation%>]);
      var icon = L.icon({iconUrl: '/img/photo2.png'});
      break;
    default:
      L.marker([<%-pointers[a].geolocation%>]);
      var icon = L.icon({iconUrl: '/img/photo3.png'});
  }

  L.icon({
      iconSize:     [38, 95],
      popupAnchor:  [-3, -76]
  });

  L.marker([<%-pointers[a].geolocation%>], {icon: icon}).addTo(mymap).bindPopup( "<%-<h1>pointers[a].name%></h1>");

<% } %>

当我在浏览器中加载地图时，正确的图标被放置在正确的位置。 但是， IconSize 和 popupAnchor 被忽略了。 是否有可能使 IconSize 和 popupAnchor 工作而不将其添加到 switch 语句中的每个案例？

Answer 1

您可以通过扩展L.icon创建自己的自定义图标

var myIcon = L.Icon.extend({
    options: {
      iconSize:     [38, 95],
      popupAnchor:  [-3, -76]
    }
});

然后像这样使用myIcon ：

var icon = new myIcon({iconUrl: '/img/photo1.png'});