2013-06-04 1 views
4

JVectorMap을 사용하면 색상이 다른 두 세트의 마커를 어떻게 추가 할 수 있습니까? 다른 질문이 하나있었습니다. 해결책은 JSFiddle에서 작동하지 않았습니다. 지금은 마커가 있고 유형을 특성화 할 수 있지만 특정 유형의 색상을 변경하는 코드는 모른다. 어떤 도움이 필요합니까?JvectorMaps로 다른 색상의 마커

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

답변

10

당신은 다른 색상에 대한 스타일을 사용할 수 있습니다 :

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

시도 스케일 : 플러그인의 문서에

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

가 말한다 : 각 마커

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

작성하는 모든 마커에 대해 이렇게하면 다른 스타일이 할당됩니다.