jQuery mapael动态图

Question

I searched the site but did not find'm looking for. I am taking the data via google analytics. I'm trying to create a dynamic plots. Where am I doing wrong? Thank you very much for the helpers.

The coordinates of the json data are correct.

The code I created for this map:

 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) }); } 

This is the json data I sent :

"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"} }

I do not have any problems when I use this example.

'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"
}

Answer 1

I solved my problem in this way.

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