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

问题描述

我刚刚实现了jQuery插件.

<块引用>

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

例如:

$('#map').vectorMap({标记样式:{最初的: {填充:'#F8E23B',中风:'#383f47'}},背景颜色:'#383f47',标记:[{latLng: [46.90, 8.45], name: "我的标记名称"}],onMarkerLabelShow:函数(事件，标签，代码){label.html("<img src="img/logo.png"><br>"+ label.html());}});

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.

How can I achieve this result?

Here's the initializing 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)...

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

Thanks for the help!!

解决方案

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

For example:

$('#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屋！