jvectormap标签HTML标记

Question

我试图在标记的悬停状态中添加两个不同的信息。在markers.html中，我为每个城市添加了一些数字，但我想以不同于城市名称的方式样式化这些数字。

我该如何向标签添加html标记？我能够通过在world-map.js中添加另一个路径来添加数字：

this.container.delegate("[class~='jvectormap-element']", 'mouseover mouseout', function(e){
    var path = this,
      type = jvm.$(this).attr('class').indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
      code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
      element = type == 'region' ? map.regions[code].element : map.markers[code].element,
      labelText = type == 'region' ? map.mapData.paths[code].name : (map.markers[code].config.name || ''),
      labelShowEvent = jvm.$.Event(type+'LabelShow.jvectormap'),
      overEvent = jvm.$.Event(type+'Over.jvectormap');

    var path2 = this,
      type = jvm.$(this).attr('class').indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
      code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
      element = type == 'region' ? map.regions[code].element : map.markers[code].element,
      labelNumber = type == 'region' ? map.mapData.paths[code].number : (map.markers[code].config.number || ''),
      labelShowEvent = jvm.$.Event(type+'LabelShow.jvectormap'),
      overEvent = jvm.$.Event(type+'Over.jvectormap');


    if (e.type == 'mouseover') {
        map.container.trigger(overEvent, [code]);
    if (!overEvent.isDefaultPrevented()) {
        element.setHovered(true);
    }

    if(labelNumber!= undefined){
        map.label.text(labelText+ "  " +labelNumber);
    }

    else{
        map.label.text(labelText);
    }
    map.container.trigger(labelShowEvent, [map.label, code]);
    if (!labelShowEvent.isDefaultPrevented()) {
        map.label.show();
        map.labelWidth = map.label.width();
        map.labelHeight = map.label.height();
        }
    } 
    else {
        element.setHovered(false);
        map.label.hide();
        map.container.trigger(type+'Out.jvectormap', [code]);
  }
});

这是我在markers.html中的结构：

 var markers = [ 
        {latLng: [33.57, -86.75], name: 'Birmingham,AL', number: '$34,000'},
        {latLng: [35.22, -92.38], name: 'Little Rock,AR', number: '$34,000'},
       ],

- HelloYellow

Answer 1

为什么不直接使用API：

$('#map').vectorMap({
  ...
  onMarkerTipShow: function(e, label, code){
    label.html('Anything you want');
    //or do what you want with label, it's just a jQuery object
  }
  ...
});

- bjornd

---

谢谢 Bjornd...你的解决方案完全奏效了！此外，这是一个很棒的库...感谢你！ - HelloYellow

如果这是正确答案，请用勾号标记此答案。 - Navigatron

bjrond，能告诉我onMarkerTipShow和onMarkerLabelShow的区别吗？ - Hareendra Chamara Philips