如何在标记定义中使用传单图标定义？答案

【问题标题】：How do I use my leaflet icon definition in my marker definition?如何在标记定义中使用传单图标定义？
【发布时间】：2020-05-07 02:27:13
【问题描述】：

我有一个这样定义的传单标记：

    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

来自 Leaflet.js:5 中的各种位置我做错了什么？

【问题讨论】：

标签： leaflet

【解决方案1】：

如Leaflet Markers With Custom Icons tutorial 所示，您只需将自定义图标变量传递给标记的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
});

【讨论】：

出于好奇，如果每个标记具有完全相同的属性，为什么还需要为它们创建一个新的图标实例？它们不只是在地图上创建实际图像的“模板”吗？
@nikoshr：不幸的是，这是 Leaflet Icon 的一个陷阱。对于简单的情况，这确实无关紧要，但在边缘情况下，它确实会产生错误。通常在更改图标实例选项时，也可能通过 Marker setIcon() 进行。请参阅stackoverflow.com/questions/33579917/… 和传单PR #1726
我已调整我的问题以反映新代码。但仍然从传单中得到 Uncaught TypeError。
很难说只有代码片段，没有复制示例。我能想到的最可能的原因是您在分配之前尝试使用 icon 变量。

【解决方案2】：

因为每个标记都是由 Ajax 从数据库构建的，所以我认为事情发生的时间会导致错误。通过将图标定义放在标记定义中，这一切都起作用了。所以新的图标调用是；

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

离完成更近了一步。

【讨论】：