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

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'});