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