jvectormap:如何在标记标签/工具提示中实现HTML而不是简单字符串? [英] jvectormap: How to implement HTML instead of simple string in the markers label/tooltip?

问题描述

我刚刚实现了jQuery插件 jvectormap ，以用于世界地图.一切正常，除非如此. 我添加了一些标记，并一直在尝试将HTML实现到标记标签/工具提示. 因此，当鼠标悬停在标记上时，我希望显示的图像/html不仅仅是"blabla".

I've just implemented the jQuery plugin jvectormap, for the use of a world map. Everything's working perfectly, except this maybe.. I added a few markers and have been trying to implement HTML to the markers label/tooltip. So instead of just "blabla" I want an image/html to show up, when hovering the marker.

如何获得此结果?

这是初始化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\">"

The important part is name: "<img src=\"img/logo.png\">"

感谢您的帮助！

推荐答案

如果要自定义鼠标悬停在标记上时显示的标签/工具提示，则应提供 onMarkerLabelShow .

If you want to customize the label/tooltip that is displayed when you mouse over the marker, you should provide a function for onMarkerLabelShow.

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

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

这篇关于jvectormap:如何在标记标签/工具提示中实现HTML而不是简单字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！