如何将引脚添加到JQVMap?

时间:2016-04-27 09:49:26

标签: jqvmap

这个问题不言而喻 - 我已经阅读了所有文档,但我显然遗漏了一些东西。

这是我目前的javascript:

在我的页面上,我致电Index.initJQVMAP();

这称之为:

initJQVMAP: function () {
    if (!jQuery().vectorMap) {
        return;
    }

    var showMap = function (name) {
        jQuery('.vmaps').hide();
        jQuery('#vmap_' + name).show();
    }

    var setMap = function (name) {
        var data = {
            map: 'world_en',
            backgroundColor: null,
            borderColor: '#333333',
            borderOpacity: 0.5,
            borderWidth: 1,
            color: '#c6c6c6',
            enableZoom: true,
            hoverColor: '#c9dfaf',
            hoverOpacity: null,
            values: sample_data,
            normalizeFunction: 'linear',
            scaleColors: ['#b6da93', '#909cae'],
            selectedColor: '#c9dfaf',
            selectedRegion: null,
            showTooltip: true,
            onLabelShow: function (event, label, code) {
                if (sample_data[code] > 0)
                    label.append(': ' + sample_data[code] + ' Views');
            },
            onRegionOver: function (event, code) {
                if (code == 'ca') {
                    event.preventDefault();
                }
            },
            onRegionClick: function (element, code, region) {
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
                alert(message);
            },
            pins: { "AF": "pin_for_af", "NA": "pin_for_na" },
            pinMode: 'id'
        };

        data.map = name + '_en';
        var map = jQuery('#vmap_' + name);
        if (!map) {
            return;
        }
        map.width(map.parent().parent().width());
        map.show();
        map.vectorMap(data);
        map.hide();
    }

    setMap("world");
    setMap("usa");
    setMap("europe");
    setMap("russia");
    setMap("germany");
    showMap("world");



    jQuery('#regional_stat_world').click(function () {
        showMap("world");
    });

    jQuery('#regional_stat_usa').click(function () {
        showMap("usa");
    });

    jQuery('#regional_stat_europe').click(function () {
        showMap("europe");
    });
    jQuery('#regional_stat_russia').click(function () {
        showMap("russia");
    });
    jQuery('#regional_stat_germany').click(function () {
        showMap("germany");
    });

    $('#region_statistics_loading').hide();
    $('#region_statistics_content').show();
},

在我的HTML中,我有:

<div style="display:none">
    <div id="pin_for_af"><p>123</p></div>
    <div id="pin_for_na"><p>456</p></div>
</div>

唯一不起作用的部分是针脚。我试过改变区域代码的情况,但这没有效果。

我的代码似乎遵循可用的文档here

任何人都可以看到我做错了什么。这些引脚根本就没有出现。

1 个答案:

答案 0 :(得分:1)

使用带有id的引脚时遇到了问题。我使用了here提供的示例。

在你的情况下,它会是这样的:

function escapeXml(string) {
    return string.replace(/[<>]/g, function (c) {
      switch (c) {
        case '<': return '\u003c';
        case '>': return '\u003e';
      }
    });
  }

var pins = {
      mo: escapeXml('<div><span>123</span></div>'),
      fl: escapeXml('<div><span>456</span></div>')
    };

然后在jqvmap的定义中使用:

      pins: pins,
      pinMode: 'content',