如何将引脚添加到 JQVMap？答案

【问题标题】：How to add pins to JQVMap?如何将引脚添加到 JQVMap？
【发布时间】：2016-04-27 09:49:25
【问题描述】：

问题不言自明 - 我已经浏览了所有文档，但我显然遗漏了一些东西。

这是我当前的 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

谁能看到我做错了什么。引脚根本不出现。

【问题讨论】：

标签： jqvmap

【解决方案1】：

我在使用带有 id 的 pin 时遇到了问题。我使用了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',

【讨论】：