1

私はMapSVGと呼ばれるプラグインを使用しており、それと一緒に実行するイベントカレンダーを作成しています.小さな情報のツールチップでイベントがある場合、マップ上の国が強調表示されます-クリックすると、国は詳細な情報を右側のパネル。問題は、SQL データベースからデータを収集し、そのデータをプラグインに渡すことにあります。これは私がこれまでに試したことです..

私は、MapSVG プラグインによって理解される文字列を作成し、イベントが存在する国に一致する SQL/JSON 配列を実行する関数を持っています。

function regions(data) {
  var region_array = 'regions: {';

  $.each(data['regions'], function( i, v ) {
    region_array = region_array + i + ': { tooltip: "' + v['events'] + ' events in ' + data[i]['details']['name'] + '", attr:{fill: "#e58271"} },';
  });
  region_array = region_array.slice(0, -1) + '}';
  return region_array;
}

文字列を返します:

regions: 
{
gb: { tooltip: "1 events in England", attr:{fill: "#e58271"} },
fr: { tooltip: "2 events in France", attr:{fill: "#e58271"} },
de: { tooltip: "1 events in Germany", attr:{fill: "#e58271"} },
at: { tooltip: "6 events in Austria", attr:{fill: "#e58271"} }
}

この文字列は MapSVG に直接コピーすると正しく機能しますが、動的に実行し、追加/削除/編集/拡張されるイベントに応じて変更する必要があります。

そのため、mapSvg イベント/宣言内で関数を実行するとうまくいくと思っていましたが、問題が発生しました..

$('#mapsvg-other').mapSvg({
  source : 'maps/europe.svg',
  colors: {background: '#CBECF3', base: '#eeaba0', stroke: "#CBECF3", selected: '#d42e12', hover: '#d42e12'},
  regions: {labels: {attr: {fill: '#555555'}}},
  width: '450px',
  height: '450px',
  tooltipsMode: 'custom',
  cursor: 'pointer',


  onClick: function(e,m){

  },
  /* regions goes into here, regions(data) or + regions(data) + will not work, is there a way to do this? */     
});    

この情報を正しく挿入する方法はありますか? または、各地域情報で配列を生成し、個別に呼び出す必要がありますか? (コードが少し長くなることを意味するため、少し悪い回避策のように思えます。そのため、効率性と整頓性を常に向上させたい場合は、この方法が機能することをお勧めします!)

4

0 に答える 0