jvectormap 다른 반지름을 가진 마커 추가

Question

나는 jvectormap을 만들고 ajax를 통해받은 마커로 채워 넣으려고합니다. 이제 맵에 마커를 넣을 수 있지만 아약스를 통해받은 다른 값을 기준으로 반경을 변경하고 싶습니다.

$.ajax({ 
      url: "/map", 
      type: 'post', 
      dataType: 'json', 
      data: { 
       _csrf : 'token' 
      }, 
      success: function (data) { 
       var mapObj = new jvm.Map({ 
        container: $('#todaymap'), 
        map: 'it_merc_en', 
        normalizeFunction: 'polynomial',   
        markerStyle: { 
         initial: { 
          fill: '#F8E23B', 
          stroke: '#383f47', 
          r: 3, 
         }, 
         hover: { 
          fill: '#383f47', 
          stroke: '#383f47' 
         } 
        }, 
        backgroundColor: '#383f47', 
        markers: [], 
        series: { 
         markers: [{ 
          attribute: 'r', 
          scale: [3,10] 
         }], 
        } 
       }); 
       $('#todaymap div:first-child').hide(); 

       var mapMarkers = []; 
       var mapMarkersValues = []; 
       mapMarkers.length = 0; 
       mapMarkersValues.length = 0; 
       for (var i = 0, l= data.length; i < l; i++) { 
        coords= Array(); 
        coords[0]= data[i].lat; 
        coords[1]= data[i].lng; 

        console.log(data[i].count); 
        mapMarkers.push({name: data[i].name, latLng: coords}); 
       } 
       mapObj.addMarkers(mapMarkers, []); 
      } 
     }); 

내가 사용하고자하는 필드는 사건의 수에 따라 0에서 6까지의 값을 가지고 data[i].count입니다. 그물에 쓸모있는 것을 찾지 못했습니다. 누구나 그 방법에 대한 아이디어가 있습니까?

Answer 1

난 그냥지도 내 자신의 구현을 테스트 한 유사한 접근 방식은, 그러나 내 버전이 이미 사용하여 맵의 생성시 설정 한 마커를 변경하도록 설정되어 작품, 그것은 사용

mapObj.markers[markerNumber].element.config.style.initial.r = scaleValue; 
mapObj.applyTransform(); 

이 작업을하려면 mapObj.addMarkers 행 다음에 데이터 위에 다른 루프를 사용하여 추가 한 다음 applyTransform()을 사용하여이 보조 루프 이후에 변경된 마커 정보로지도를 다시 그리거나 새로 고침해야합니다. 이것은 내가 상상할 수있을 것입니다 :

for (var i = 0, l= data.length; i < l; i++) { 
    mapObj.markers[i].element.config.style.initial.r = data[i].count; 
} 
mapObj.applyTransform(); 

편집 : 코드를 다시보고 처음 마커를 만들면서 무언가를 시도한 후에 실제로 mapMarkers 배열에 정보를 추가하면됩니다.

mapMarkers.push({name: data[i].name, latLng: coords, r:data[i].count});