1

我正在使用一个名为 MapSVG 的插件，并正在制作一个事件日历来与其一起运行，如果地图上的国家/地区有事件，则它们会突出显示，并带有用于小信息的工具提示 - 单击时，国家/地区会显示更多信息面板在右侧。问题在于从 SQL 数据库收集数据，并将该数据传递给插件。这是我到目前为止所尝试的..

我有一个函数通过 SQL/JSON 数组匹配事件到他们所在的国家，创建一个 MapSVG 插件可以理解的字符串：

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