Wie füge ich Pins zu JQVMap hinzu?

Question

Die Frage spricht für sich - ich habe die ganze Dokumentation durchgegangen, aber mir fehlt offensichtlich etwas.

Hier ist meine aktuelle javascript:

Auf meiner Seite nenne ich Index.initJQVMAP();

Welche dies nennt:

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(); 
}, 

In meinem HTML ich habe:

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

Die einzige Teil, der nicht funktioniert, sind die Pins. Ich habe versucht, den Fall der Regionalcodes zu ändern, aber dies hat keine Auswirkungen.

Mein Code scheint die Dokumentation verfügbar here

Kann jemand sehen, was ich falsch mache zu folgen. Die Pins erscheinen gar nicht.

Answer 1

Ich hatte Probleme beim Arbeiten mit Pins mit ID. Ich habe das Beispiel here verwendet.

In Ihrem Fall wäre es so etwas wie:

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>') 
    }; 

Und dann in der Definition der jqvmap Verwendung:

 pins: pins, 
     pinMode: 'content',