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

在插件的文档中说:

Each marker is represented by latLng (array of two numeric values), name (string which will be show on marker's tip) and any marker styles.

那么我们要做的就是以下内容。

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

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