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

Question

我刚刚实现了jQuery插件jvectormap，用于显示世界地图。一切都运行得很完美，除了这个问题...我添加了几个标记，并试图将HTML实现到标记的标签/工具提示中。因此，当悬停在标记上时，不仅显示“blabla”，还要显示图像/ HTML。如何实现这个效果？以下是初始化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\">" 感谢帮助！

- James Cazzetta

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

- Mads Hansen

---

非常好，已经为一个标签解决了问题！ :) 那么我如何在“onMarkerLabelShow”函数中区分两个标签？ - James Cazzetta

code将在onMarkerLabelShow()函数中返回该标记的name。查看以下示例，了解如何在悬停在一个区域上时显示国旗图像，同样的技术也可应用于标记：https://dev59.com/x2LVa4cB1Zd3GeqPwG3n#12769847 - Mads Hansen

onMarkerLabelShow 目前已被弃用，应使用带有相同参数的 onMarkerTipShow 函数进行替代。 - Dmitrii Malyshev

不错的@MadsHansen。如何在标签中显示数据库值？当我点击国家时？我尝试了最近两个星期，但是一直没有得到答案，请帮帮我。 - Thennarasu

@Thennarasu 最好在 onMarkerLabelShow 函数内通过 AJAX 调用检索数据库值。你需要像这样的东西：var dbValue; $.ajax({ url: "database.php", success: function(data) { dbValue = data; } }); - James Cazzetta