在Highmaps中组合两个位置

时间:2016-06-14 04:20:04

标签: jquery svg highcharts jquery-svg highmaps

我有两个位置x,y。可以通过jQuery / Highmaps选项将它组合在一起形成1个位置吗?我知道这可以通过像Inkscape这样的矢量图形软件来源(来源:http://www.highcharts.com/docs/maps/custom-maps)。

2 个答案:

答案 0 :(得分:0)

我从您的问题中了解到,您希望在一张地图中加入两个地区。 您可以使用此

执行此操作

plotOptions:{   allAreas:假 }

答案 1 :(得分:0)

是的,如果两个地图具有相同的基准坐标,则可能。作为美国的示例地图,详细的阿拉斯加第二张地图:http://jsfiddle.net/1k5ddu85/



https://maps.googleapis.com/maps/api/staticmap?size=600x400&scale=2&markers=icon:shortenedURL-Encoded|50.367285472963,-4.138801595&center=50.367285472963,-4.138801595&zoom=10

$(function () {

    // Prepare demo data
    var data = [
        {
            "hc-key": "us-ma",
            "value": 0
        },
        {
            "hc-key": "us-wa",
            "value": 1
        },
        {
            "hc-key": "us-ca",
            "value": 2
        },
        {
            "hc-key": "us-or",
            "value": 3
        },
        {
            "hc-key": "us-wi",
            "value": 4
        },
        {
            "hc-key": "us-me",
            "value": 5
        },
        {
            "hc-key": "us-mi",
            "value": 6
        },
        {
            "hc-key": "us-nv",
            "value": 7
        },
        {
            "hc-key": "us-nm",
            "value": 8
        },
        {
            "hc-key": "us-co",
            "value": 9
        },
        {
            "hc-key": "us-wy",
            "value": 10
        },
        {
            "hc-key": "us-ks",
            "value": 11
        },
        {
            "hc-key": "us-ne",
            "value": 12
        },
        {
            "hc-key": "us-ok",
            "value": 13
        },
        {
            "hc-key": "us-mo",
            "value": 14
        },
        {
            "hc-key": "us-il",
            "value": 15
        },
        {
            "hc-key": "us-in",
            "value": 16
        },
        {
            "hc-key": "us-vt",
            "value": 17
        },
        {
            "hc-key": "us-ar",
            "value": 18
        },
        {
            "hc-key": "us-tx",
            "value": 19
        },
        {
            "hc-key": "us-ri",
            "value": 20
        },
        {
            "hc-key": "us-al",
            "value": 21
        },
        {
            "hc-key": "us-ms",
            "value": 22
        },
        {
            "hc-key": "us-nc",
            "value": 23
        },
        {
            "hc-key": "us-va",
            "value": 24
        },
        {
            "hc-key": "us-ia",
            "value": 25
        },
        {
            "hc-key": "us-md",
            "value": 26
        },
        {
            "hc-key": "us-de",
            "value": 27
        },
        {
            "hc-key": "us-pa",
            "value": 28
        },
        {
            "hc-key": "us-nj",
            "value": 29
        },
        {
            "hc-key": "us-ny",
            "value": 30
        },
        {
            "hc-key": "us-id",
            "value": 31
        },
        {
            "hc-key": "us-sd",
            "value": 32
        },
        {
            "hc-key": "us-ct",
            "value": 33
        },
        {
            "hc-key": "us-nh",
            "value": 34
        },
        {
            "hc-key": "us-ky",
            "value": 35
        },
        {
            "hc-key": "us-oh",
            "value": 36
        },
        {
            "hc-key": "us-tn",
            "value": 37
        },
        {
            "hc-key": "us-wv",
            "value": 38
        },
        {
            "hc-key": "us-dc",
            "value": 39
        },
        {
            "hc-key": "us-la",
            "value": 40
        },
        {
            "hc-key": "us-fl",
            "value": 41
        },
        {
            "hc-key": "us-ga",
            "value": 42
        },
        {
            "hc-key": "us-sc",
            "value": 43
        },
        {
            "hc-key": "us-mn",
            "value": 44
        },
        {
            "hc-key": "us-mt",
            "value": 45
        },
        {
            "hc-key": "us-nd",
            "value": 46
        },
        {
            "hc-key": "us-az",
            "value": 47
        },
        {
            "hc-key": "us-ut",
            "value": 48
        },
        {
            "hc-key": "us-hi",
            "value": 49
        },
        {
            "value": 51
        }
    ];
    
    var data2 = [{
            "hc-key": "us-ak-110",
            "value": 3
        },
        {
            "hc-key": "us-ak-261",
            "value": 4
        },
        {
            "hc-key": "us-ak-020",
            "value": 5
        },
        {
            "hc-key": "us-ak-070",
            "value": 4
        },
        {
            "hc-key": "us-ak-013",
            "value": 3
        },
        {
            "hc-key": "us-ak-180",
            "value": 2
        },
        {
            "hc-key": "us-ak-016",
            "value": 4
        },
        {
            "hc-key": "us-ak-150",
            "value": 3
        },
        {
            "hc-key": "us-ak-290",
            "value": 33
        },
        {
            "hc-key": "us-ak-105",
            "value": 44
        },
        {
            "hc-key": "us-ak-122",
            "value": 22
        },
        {
            "hc-key": "us-ak-050",
            "value": 23
        },
        {
            "hc-key": "us-ak-164",
            "value": 43
        },
        {
            "hc-key": "us-ak-060",
            "value": 23
        },
        {
            "hc-key": "us-ak-130",
            "value": 43
        },
        {
            "hc-key": "us-ak-170",
            "value": 23
        },
        {
            "hc-key": "us-ak-090",
            "value": 43
        },
        {
            "hc-key": "us-ak-068",
            "value": 23
        },
        {
            "hc-key": "us-ak-198",
            "value": 23
        },
        {
            "hc-key": "us-ak-195",
            "value": 2
        },
        {
            "hc-key": "us-ak-100",
            "value": 43
        },
        {
            "hc-key": "us-ak-230",
            "value": 34
        },
        {
            "hc-key": "us-ak-240",
            "value": 32
        },
        {
            "hc-key": "us-ak-220",
            "value": 22
        },
        {
            "hc-key": "us-ak-188",
            "value": 23
        },
        {
            "hc-key": "us-ak-270",
            "value": 43
        },
        {
            "hc-key": "us-ak-185",
            "value": 23
        },
        {
            "hc-key": "us-ak-282",
            "value": 43
        },
        {
            "hc-key": "us-ak-275",
            "value": 23
        }
    ];

    // Initiate the chart
    $('#container').highcharts('Map', {

        title : {
            text : 'Highmaps basic demo'
        },

        subtitle : {
            text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/us/us-all.js">United States of America</a>'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0
        },

        series : [{
        		allAreas: false,
            data : data,
            mapData: Highcharts.maps['countries/us/us-all'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }, {
        		allAreas: false,
            data : data2,
            mapData: Highcharts.maps['countries/us/us-all-all'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }, {
            name: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
            color: 'silver',
            showInLegend: false,
            enableMouseTracking: false
        }]
    });
});
&#13;
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
&#13;
&#13;
&#13;