javascript - Mysql和leafletjs中的自定义图标

Question

我很难让 leafletjs 通过 SQL 数据使用自定义图标。

我已经让多边形使用 SQL 定义的颜色，但每次我尝试对 {icon: } 使用相同的方法时，我最终得到的是
jQuery.Deferred 异常:t.icon.createIcon 不是函数类型错误:t.icon.createIcon 不是函数

尝试将 SQL 数据设置为 var 也没有成功
var myicon = companies[i]['type']

但是在弹出窗口中调用 companies[i]['type'] 可以正常工作并显示数据。

在数据库中，该字段称为 type 并被格式化为 gasIcon 或 defaIcon 等字符串，因此当它被调用时它匹配不同的图标。

这是标记代码。

function addCompanies() {
  var TypeIcon = L.Icon.extend({
    options: {
      shadowUrl: './images/type-shadow.png',
      iconSize: [33, 44],
      shadowSize: [36, 39],
      iconAnchor: [17, 44],
      shadowAnchor: [0, 50],
      popupAnchor: [-3, -50]
    }
  });
  var gasIcon = new TypeIcon({
        iconUrl: './images/gasIcon.png'
      }),
      ammuIcon = new TypeIcon({
        iconUrl: './images/ammuIcon.png'
      }),
      copsIcon = new TypeIcon({
        iconUrl: './images/copsIcon.png'
      }),
      carsIcon = new TypeIcon({
        iconUrl: './images/carsIcon.png'
      }),
      bankIcon = new TypeIcon({
        iconUrl: './images/bankIcon.png'
      }),
      defaIcon = new TypeIcon({
        iconUrl: './images/defaIcon.png'
      }),
      hospIcon = new TypeIcon({
        iconUrl: './images/hospIcon.png'
      });

  for (var i = 0; i < companies.length; i++) {
    var marker = L.marker([
      companies[i]['latitude'], 
      companies[i]['longitude']
    ],{
      icon: companies[i]['type']
    }).addTo(map);

    marker.bindPopup("<b>" + 
                     companies[i]['company'] + "-" + 
                     companies[i]['type'] + 
                     "</b><br>Details:" + 
                     companies[i]['details'] + 
                     "<br />Telephone: " + 
                     companies[i]['telephone']);
  }
}

不明白为什么 icon: companies['type'] 不起作用但 color: areas[i]['color'] 起作用.

非常感谢，这是我第一次在这里提问，如果我没有留下足够的信息来帮助找到答案，我深表歉意，但如果需要，我会发布更多信息。

Answer 1

正如评论中所暗示的，companies[i]['type'] 的值是一个字符串。它不会成为一个变量，在这种情况下，它不会成为对任何图标的引用。这就是它在弹出文本中也起作用的原因，如果您将图标引用放入弹出文本中，您会得到显示为 [object Object] 的内容，这不是很有用。

结果是 icon: "gasIcon" 而不是 icon: gasIcon。

要解决此问题，您可以像这样将图标放入对象中:

var icons = {
    gasIcon: new TypeIcon({iconUrl: './images/gasIcon.png'}),
    ammuIcon: new TypeIcon({iconUrl: './images/ammuIcon.png'}),
    copsIcon: new TypeIcon({iconUrl: './images/copsIcon.png'})
}

然后你可以得到一个像这样的工作图标引用:

icon: icons[companies[i]['type']]

演示:https://plnkr.co/edit/Gyjl3MFmsC8g4yPS8n5V?p=preview