jquery - 使用 JvectorMaps 的不同颜色标记

Question

使用 JVectorMap，如何添加两组不同颜色的标记？还有一个关于它的问题，并且该解决方案在 JSFiddle 上不起作用。现在我有类似的标记，我可以为类型赋予属性，但我不知道会改变特定类型颜色的代码。有什么帮助吗？

<div id="map"></div>
<script>
  $(function(){
    $('#map').vectorMap({
    map: 'us_aea_en',
    zoomOnScroll: true,
    hoverOpacity: 0.7,
    markerStyle: {
      initial: {
        fill: '#800000',
        stroke: '#383f47'
      }
    },
    markers: [
      {latLng: [41.50, -87.37], name: 'Test1 - 2010', type : "chicago"},
      {latLng: [39.16, -84.46], name: 'Test2 - 2010'},
      {latLng: [39.25, -84.46], name: 'Test3 - 2010'}
    ] 


    });
   });
</script>

Answer 1

在插件的文档中说：

每个标记由 latLng（两个数值的数组）、名称（将显示在标记尖端的字符串）和任何标记样式表示。

所以我们要做的是以下。

$('#world-map').vectorMap({
    markers: [
        { latLng: [38.90, -98.45], name: 'John Doe', style: {r: 8, fill:'yellow'}},
        { latLng: [46.90, -65], name: 'Label name', style: {r: 12, fill:'black'}},
        { latLng: [46.90, -65], name: 'Label name', style: {r: 4, fill:'red'}}
    ]
});

这样，对于您创建的每个标记，都会为其分配不同的样式。

Answer 2

您可以使用不同颜色的样式：

{latLng: [41.50, -87.37], name: 'Test1 - 2010', style: {fill: 'rgba(0,0,255,0.1)', r:20}},

Answer 3

尝试秤：

    markers: [
       {latLng: [41.50, -87.37], name: 'Test1 - 2010', type : "chicago"},
       {latLng: [39.16, -84.46], name: 'Test2 - 2010'},
       {latLng: [39.25, -84.46], name: 'Test3 - 2010'}
    ],
    scales: {
        markers:[{
           attributes: 'fill',
           scale: ['#000000/*color1*/', '/*color2*/'....],
           values: [0, 1, 2]
       }]
    }