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（将在标记＆＃39; s提示上显示的字符串）和任何标记样式

我们所做的就是以下几点。

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

与JvectorMaps不同的彩色标记

3 个答案: