angular - Jvectormap 悬停显示省名两次

Question

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

在 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 也是左侧，但它们相互重叠。我现在只需要知道如何删除其中的 2 个实例。该代码用于查看对象。我可以在这里更改它，但将标签1设置为 null 和 pop()，两者都不起作用。

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

Answer 1

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

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

我相信由于某些原因多次创建了地图，但这只是猜测，因为您提到了角度组件。

您可以：

• 将该方法添加remove到您的组件并调用 mapremove方法：

  $("#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);
  

Answer 2

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

如果有人有这个问题。
使用 splice，您可以删除这些对象。