Mapael Map如何使用jQuery创建动态JSON

时间:2019-07-01 10:11:52

标签: jquery json mapael

如何使用$.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]
                    }
                }

我得到的输出 enter image description here enter image description here 我需要的输出 enter image description here 我的代码:

$(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/

0 个答案:

没有答案