2016-09-13 3 views
0

jvectormapを作成し、それにajaxで受け取ったマーカーを挿入しようとしています。マップにマーカーを配置できるようになりましたが、ajax経由で受け取った別の値に基づいてマーカーの半径を変更したいと考えています。jvectormap異なる半径のマーカーを追加する

$.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です。私はネット上で役に立たないものは見つけられませんでした。誰でもそれを行う方法についてのアイデアはありますか?

答えて

0

私はちょうどマップの私の独自の実装でテストしてみた同様のアプローチは、しかし、私のバージョンが既に使用して、マップの作成時に設定されているマーカーを変更するように設定されている作品は、それが使用しています:

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

これを動作させるには、データ上の別のループを使ってmapObj.addMarkers行の後にこれを追加してから、この2次ループの後に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}); 
関連する問題