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

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

1 个答案: