jqvmap - JQVMap如何添加图钉？

Question

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

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

谁能看出我做错了什么。这些图钉根本就没有出现。

Answer 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',