Как использовать определение значка листовки в определении маркера?

Question

У меня есть маркер листовки, определенный следующим образом:

    var W0KCN3 = new L.marker(new L.LatLng(39.2859182,-94.667236),{
     opacity: 0.5,
     contextmenu: true, 
     contextmenuWidth: 140,
     contextmenuItems: [{ text: 'Click here to add mileage circles',
     callback: circleKoords}], 
icon:  firstaidicon,
title:`marker_1 ` }).addTo(fg).bindPopup(`1<br>Northland ARES Platte Co. Resource Center<br>Kansas City, MO<br><br>39.2859182, -94.667236<br>EM29PG`).openPopup(); 

И у меня есть значок, определенный следующим образом:

    // Define a PoiIcon class
var PoiIcon = L.Icon.extend({
    options: {
        iconSize: [32, 37]
    }
});

// Create five icons from the above PoiIcon class
var firstaidicon = new PoiIcon({iconUrl: 'images/markers/firstaid.png'}),
    eocicon = new PoiIcon({iconUrl: 'images/markers/eoc.png'}),
    policeicon = new PoiIcon({iconUrl: 'images/markers/police.png'}),
    skywarnicon = new PoiIcon({iconUrl: 'images/markers/skywarn.png'}),
    repeatericon = new PoiIcon({iconUrl: 'markers/repeater.png'});

Я хочу использовать firstaidicon в определении маркера, но Я изо всех сил пытаюсь заставить его работать. Я пробовал:

icon:  firstaidicon,

Но теперь я получаю;

Uncaught TypeError: Cannot read property 'createIcon' of undefined 

из разных мест в листовке. js: 5 Что я делаю не так?

Answer 1

Как показано в учебнике Маркеры листовок с пользовательскими значками , вы просто передаете свою переменную настраиваемого значка в параметр icon вашего маркера:

var firstaidicon = L.icon();

L.marker(latLng, {
  icon: firstaidicon // instead of new L.firstaidicon
});

Примечание: убедитесь, что для создания разных экземпляров значков (даже с идентичными параметрами) для каждого маркера. Простой способ сделать это также показан в руководстве, расширив класс Leaflet Icon:

var firstaidiconClass = L.Icon.extend({
  options: {
    iconUrl: 'images/markers/firstaid.png',
    iconSize: [32, 37]
  }
});

L.marker(latLng, {
  icon: new firstaidiconClass
});

Answer 2

Поскольку каждый маркер создавался Ajax из БД, я думаю, что время, когда что-то произошло, привело к ошибкам. Поместив определение значка в определение маркера, все заработало. Итак, новый вызов значка:

icon: L.icon({iconUrl: `images/markers/skywarn.png`, iconSize: [32, 34]}),

На одну строку ближе к завершению.