jvectormap:如何在标记标签/工具提示中实现HTML而不是简单的字符串？

Question

我刚刚实现了jQuery插件jvectormap,以便使用世界地图.一切都很完美,除了这可能..我添加了一些标记,并一直在尝试将HTML实现到标记标签/工具提示.因此,当悬停标记时,我想要显示图像/ html,而不仅仅是"blabla".

我怎样才能达到这个效果？

这是初始化JS:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "<img src=\"img/logo.png\">"}
    ],
...(other code isn't important)...

重要的是 name: "<img src=\"img/logo.png\">"

谢谢您的帮助!!

Answer 1

如果要自定义鼠标悬停在标记上时显示的标签/工具提示,则应为onMarkerLabelShow提供一个功能.

onMarkerLabelShow 函数(Event e, Object label, String code)将在标记标签显示之前调用.

例如:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "My marker name"}
    ],
    onMarkerLabelShow: function(event, label, code) {
     label.html("<img src=\"img/logo.png\"><br>"+ label.html());                
    }
});