jvectormap悬停两次显示省名

Question

所以我正在实施荷兰的 jvectormap，现在当我将鼠标悬停在地图上时，我得到了该省的双重名称标签。

IN HTML

 <div id="worldMap" style="height: 385px;"></div>

在组件中

var mapData = {
        "NL-ZH": 100000
    };
    $('#worldMap').vectorMap({
        map: 'nl_mill',
        backgroundColor: "transparent",
        zoomOnScroll: false,
        regionStyle: {
            initial: {
                fill: '#e4e4e4',
                "fill-opacity": 0.9,
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 0
            }
        },

        series: {
            regions: [{
                values: mapData,
                scale: ["#AAAAAA","#444444"],
                normalizeFunction: 'polynomial'
            }]
        },
    });

正如您在下面看到的，生成了两次 jvectormap-tip。

希望有人能帮助我。

突破:

显然制作了 3 个标签实例。 0 是左边的，1 是右边的，2 也是左边的但它们相互重叠。我现在需要知道的是如何删除其中的两个实例。该代码用于查看对象。我可以在这里更改它，但是将 label1 设置为 null 和 pop()，两者都不起作用。

     onRegionTipShow: function (event, label, code) {
      console.log(label)
    },
});

Answer 1

   onRegionTipShow: function (event, label, code) {
      console.log(label)
      label.splice(1,1);
      label.splice(2,1);
    },
});

如果有人遇到过这个问题。
使用 splice 你可以删除这样的对象。

Answer 2

查看 jVectorMap 源代码，tip 是在地图构造函数中创建的：

jvm.Map = function(params) {
   ...
   this.createTip();
   ...
}

我相信该地图出于某些原因不止一次创建，但这只是猜测，因为您提到了 angular 组件。

您可以：

将 remove 方法添加到您的组件并调用映射 remove 方法：

$("#worldMap").vectorMap('get','mapObject').remove();

...因为这也会删除 tip:

/**
  * Gracefully remove the map and and all its accessories, unbind event handlers.
*/
remove: function(){
  this.tip.remove();
  this.container.remove();
  jvm.$('body').unbind('mouseup', this.onContainerMouseUp);
}

此外，我会用这样的东西来清理地图：

function removeMap() {
  var mapObj = $("#worldMap").vectorMap('get','mapObject');
  if (typeof mapObj.remove !== 'undefined')  {
    mapObj.remove();
    $("#worldMap").contents().remove();
  }
}

您可以修补 jVectorMap 源代码以将 tip 附加到地图容器，而不是 body （如果您在页面中使用多个地图也是如此).

替换 jVectorMap 中的这一行：
```
//this.tip = jvm.$('<div/>').addClass('jvectormap-tip').appendTo(jvm.$('body'));
this.tip = jvm.$('<div/>').addClass('jvectormap-tip').appendTo(this.container);
```

jvectormap悬停两次显示省名

Jvectormap hovering displays the province name twice

angular

angular6

jvectormap

jqvmap