Question

我确实已经意识到其他jqvMap自定义工具提示主题已经得到解答，但是，该解决方案对我不起作用。

这是我当前jQuery的jqvMap代码：

  jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
      map: 'usa_en',
      enableZoom: true,
      showTooltip: true,
      selectedColor: null,
      hoverColor: null,
      backgroundColor: '#fffff',
      colors: {
        fl: '#016ea1',
        ma: '#016ea1',
        md: '#016ea1',  
        wa: '#016ea1',
        mn: '#016ea1',
        ny: '#016ea1',
        wi: '#016ea1',
        hi: '#016ea1',
        vt: '#016ea1',
        nv: '#016ea1',
        ia: '#016ea1',
        ca: '#016ea1',
        or: '#016ea1',
        nj: '#016ea1',
      },
onRegionClick: function(element, code, region)
{
        window.location = 'http://google.com/' + region;

},
            onLabelShow: function(event, label, code) {
                if (states.toLowerCase().indexOf(code) <= -1) {
                    event.preventDefault();
                } else if (label[0].innerHTML == "Colorado") {
                    label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
                }
            },
    });
  });

我尝试在“onLabelShow”部分使用其他主题的代码，但它只是让我的工具提示整体消失。任何解决方案吗？

谢谢！

链接： https://github.com/manifestinteractive/jqvmap（jqvMap文档） Custom Tooltips JQVMap（其他主题）

Answer 1

如果您查看浏览器控制台，您会看到根本没有定义states变量。如果你想阻止工具提示显示不存在的状态，你需要定义states，如果没有，只需删除第一个if语句。 onLabelShow应该看起来像这样：

onLabelShow: function(event, label, code) {
        states =["fl","ma","md","wa","mn","ny","wi","hi","vt","nv","ia","ca","or","nj"];
        if (states.indexOf(code) <= -1) {
            event.preventDefault();
        } else if (label[0].innerHTML == "Florida") {
            label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
        }
    },
});

您可以找到工作样本Here

希望有所帮助。

jqvMap自定义工具提示

1 个答案: