Different Colored Markers with JvectorMaps

问题:

With JVectorMap, How can I add two sets of markers that are different colors? There's been one other question asked about it and the solution didn't work on JSFiddle. Right now I have markers like and I can attribute types, but I don't know the code that would change the colors of specific types. Any help?

<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>

回答1:

You may use style for different colors:

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

回答2:

In the documentation of the plugin it is said:

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.

So what we do is the following.

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

This way for every marker you create there will be different styles assigned to it.

回答3:

try scales:

    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]
       }]
    }