jquery - jQuery mapael 动态绘图

Question

我搜索了该网站，但没有找到。我正在通过谷歌分析获取数据。我正在尝试创建动态图。我在哪里做错了？非常感谢各位帮手。

json数据的坐标是正确的。

我为此地图创建的代码：

function initMap(arr) {
  var $map = $('#map'),
    state;
  $map.mapael({
    map: {
      name: "turkey",
      defaultArea: {
        attrs: {
          fill: '#242424',
          stroke: Sing.colors['body-bg'],
        },
        attrsHover: {
          fill: '#e9ebf6',
          animDuration: 100
        },
        tooltip: {
          content: function() {
            return '<strong>' + state + '</strong>';
          }
        },
        eventHandlers: {
          mouseover: function(e, id) {
            state = id;
          }
        }
      },
      defaultPlot: {
        size: 17,
        attrs: {
          fill: Sing.colors['brand-warning'],
          stroke: Sing.colors['white'],
          "stroke-width": 0,
          "stroke-linejoin": "round"
        },
        attrsHover: {
          "stroke-width": 1,
          animDuration: 100
        }
      },
      zoom: {
        enabled: true,
        step: 0.75
      }
    },
    plots: {
      arr
    }
  });

  console.log(arr);

  //ie svg height fix
  function _fixMapHeight() {
    $map.find('svg').css('height', function() {
      return $(this).attr('height') + 'px';
    });
  }

  _fixMapHeight();
  SingApp.onResize(function() {
    setTimeout(function() {
      _fixMapHeight();
    }, 100)
  });
}

这是我发送的 json 数据：

"e0" : {latitude:39.9334, longitude: 32.8597, tooltip: { content : "Ankara"} },"e1" : {latitude:41.0082, longitude: 28.9784, tooltip: { content : "Istanbul"} },"e2" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e3" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e4" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e5" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e6" : {latitude:54.3081, longitude: 9.6607, tooltip: { content : "Rendsburg"} }

当我使用这个例子时，我没有任何问题。

'paris' : {
    latitude : 48.86, 
    longitude: 2.3444
},
'lyon' : {
    type: "circle",
    size:50,
    latitude :45.758888888889, 
    longitude: 4.8413888888889, 
    value : 700000, 
    href : "http://fr.wikipedia.org/wiki/Lyon",
    tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Lyon"},
    text : {content : "Lyon"}
},
'rennes' : {
    type :"square",
    size :20,
    latitude : 48.114166666667, 
    longitude: -1.6808333333333, 
    tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Rennes"},
    text : {content : "Rennes"},
    href : "http://fr.wikipedia.org/wiki/Rennes"
}

标签： jquerymapael

Answer 1

我以这种方式解决了我的问题。

var updatedOptions = {'areas' : {}, 'plots' : {}};
        
eval('var newPlots={' + data.slice(0, -1) + '}');
        
$(".mapael").trigger('update', [updatedOptions, newPlots]);