jquery - 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 Function (Event e, Object label, String code) Will be called right before the marker label is going to be shown.

例如:

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