无法使用 jVectorMap 将区域标签呈现为 HTML

Can't render region labels as HTML with jVectorMap

本文关键字：标签 HTML 区域 jVectorMap      更新时间：2023-09-26

我把我的代码写成了一个小提琴：http://jsfiddle.net/V8dyd/266/

我能够在地图上将区域标签呈现为字符串，但无法将它们呈现为 HTML。 

$(function(){
    var Jsondata = {
        LK: " Region :  Asia,  Feedback : 228, Good : 34.00%, Normal : 33.00%, Bad : 30.00% ",
        IN: "Total Responses : 228"
    };
    var map = $('#map').vectorMap({
        map: 'world_mill_en',
        zoomMin: 1,
        zoomMax: 1,
        regionLabelStyle: {
            initial: {
                fill: '#B90E32'
            },
            hover: {
                fill: 'black'
            }
        },
        labels: {
            regions: {
                render: function (code) {
                    if (code==="LK") {  
                        var a = Jsondata[code];
                        var array = a.split(',');
                        var s = "<html><body><div><small>" + array[0]  +"</small><br><small>" + array[1] + "</small><br><small>" + array[2] + "</small><br><small>" + array[3] + "</small></div</body></html>";
                        var htmlObject = document.createElement('div');
                        htmlObject.innerHTML = s;
                        return htmlObject;
                        // return  s
                    }
                }
            }
        }
    });
});
标签使用

svg TEXT-Tags 呈现，不允许使用 HTML。在当前版本中，这不受支持，但我在区域函数中使用了一个钩子来实现换行符：https://github.com/bjornd/jvectormap/blob/master/src/region.js

喜欢这个：

 jvm.Region = function(config){
      var bbox,
          text,
          offsets,
          labelDx,
          labelDy;
      this.config = config;
      this.map = this.config.map;
      this.shape = config.canvas.addPath({
        d: config.path,
        'data-code': config.code
      }, config.style, config.canvas.rootElement);
      this.shape.addClass('jvectormap-region jvectormap-element');
      bbox = this.shape.getBBox();
      myHook(bbox, text, offsets, config);
      return false;
      ...
 }
 function myHook(bbox, text, offsets, config){
     // Create your own Label like this
     text = this.getLabelText(config.code);
     if (this.config.label && text) {
        offsets = this.getLabelOffsets(config.code);
        this.labelX = bbox.x + bbox.width / 2 + offsets[0];
        this.labelY = bbox.y + bbox.height / 2 + offsets[1];
        this.label = config.canvas.addText({
            text: text,
            'text-anchor': 'middle',
            'alignment-baseline': 'central',
            x: this.labelX,
            y: this.labelY,
            'data-code': config.code
        }, config.labelStyle, config.labelsGroup);
        this.label.addClass('jvectormap-region jvectormap-element');
    } 
 }

这不是最好的方法，但也许它可以帮助你！

相关文章：