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 к Вашему компоненту и вызвать карту 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);
  

Answer 2

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

, если у кого-либо возникла эта проблема.
с помощью сплайсинга вы можете удалять подобные объекты.