如何使用$.each
创建动态json
我需要的json:
plots: {
'ny': {
latitude: 40.717079,
longitude: -74.00116,
tooltip: {content: "New York"},
value: [5000, 20]
},
'an': {
latitude: 61.2108398,
longitude: -149.9019557,
tooltip: {content: "Anchorage"},
value: [50000, 20]
},
'sf': {
latitude: 37.792032,
longitude: -122.394613,
tooltip: {content: "San Francisco"},
value: [150000, 20]
},
'pa': {
latitude: 19.493204,
longitude: -154.8199569,
tooltip: {content: "Pahoa"},
value: [5000, 200]
},
'la': {
latitude: 34.025052,
longitude: -118.192006,
tooltip: {content: "Los Angeles"},
value: [50000, 200]
},
'dallas': {
latitude: 32.784881,
longitude: -96.808244,
tooltip: {content: "Dallas"},
value: [150000, 200]
},
'miami': {
latitude: 25.789125,
longitude: -80.205674,
tooltip: {content: "Miami"},
value: [5000, 2000]
},
'washington': {
latitude: 38.905761,
longitude: -77.020746,
tooltip: {content: "Washington"},
value: [50000, 2000]
},
'seattle': {
latitude: 47.599571,
longitude: -122.319426,
tooltip: {content: "Seattle"},
value: [150000, 2000]
},
'test1': {
latitude: 44.671504,
longitude: -110.957968,
tooltip: {content: "Test 1"},
value: [5000, 2000]
},
'test2': {
latitude: 40.667013,
longitude: -101.465781,
tooltip: {content: "Test 2"},
value: [50000, 200]
},
'test3': {
latitude: 38.362031,
longitude: -86.875938,
tooltip: {content: "Test 3"},
value: [150000, 20]
}
}
$(function() {
var plot = {};
var statedata = [];
var slices = [];
$.getJSON("https://api.hubapi.com/hubdb/api/v1/tables/*****/rows?portalId=*****", function(data) {
$.each(data.objects, function(key, val) {
var state = val.values[17].toLowerCase();
var latitude = val.values[13];
var longitude = val.values[14];
var imglegend;
if (val.values[16] == 'Gas') {
imglegend = 'https://cdn2.hubspot.net/hubfs/****/Map%20Legends/resource-Gas.png';
} else if (val.values[16] == 'Electric') {
imglegend = 'https://cdn2.hubspot.net/hubfs/****/Map%20Legends/resource-Electric.png';
} else if (val.values[16] == 'Water') {
imglegend = 'https://cdn2.hubspot.net/hubfs/****/Map%20Legends/resource-Water.png';
}
var legendsdata = {
label: val.values[16],
sliceValue: val.values[16],
type: "image",
url: imglegend,
width: 40,
height: 40,
attrsHover: {
transform: "s1.5"
}
};
slices.push(legendsdata);
var tooltip = {
content: val.values[2]
};
statedata.push(state);
plot[statedata]={
latitude: Number(latitude),
longitude: Number(longitude),
tooltip: tooltip,
value: val.values[16]
};
});
$(".mapcontainer").mapael({
map: {
name: "usa_states",
zoom: {
enabled: true,
maxLevel: 20
},
defaultArea: {
attrs: {
fill: "#f4f4e8",
stroke: "#ced8d0"
},
attrsHover: {
fill: "#a4e100"
}
}
},
legend: {
plot: {
title: "Utility Types",
slices: slices
}
},
plots: plot
});
});
});
我尝试了所有方法,但没有找到创建动态Map所需的创建Json的正确方法,我无法弄清楚如何使用$.EACH
创建所需的json地图源:https://www.vincentbroute.fr/mapael/