与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: [41.50, -87.37], name: 'Test1 - 2010', style: {fill: 'rgba(0,0,255,0.1)', r:20}},

Answer 2

在插件的文档中,它说:

每个标记由latLng(两个数值的数组),name(将在标记的尖端显示的字符串)和任何标记样式表示.

所以我们做的是以下几点.

$('#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'}}
    ]
});

这种方式对于您创建的每个标记都将分配不同的样式.