highmaps中给地图进行标点的两种方法

	<div id="map1"></div>
    <div id="map2"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.highcharts.com.cn/highmaps/highmaps.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>

   $(function () {
   方法1
            var data = [
                { name: "北京", value: 199 },
                { name: "天津", value: 42 },
                { name: "河北", value: 102 },
                { name: "山西", value: 81 },
                { name: "内蒙古", value: 47 },
                { name: "辽宁", value: 67 },
                { name: "吉林", value: 82 },
                { name: "黑龙江", value: 123 },
            ]
            // Initiate the chart
            $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function (mapData) {
                mapData.features.forEach(function (v, i) {
                    // 地区名称
                    var name = v.properties.name;
                    // // 地区经纬度
                    var lon = v.properties.longitude;
                    var lat = v.properties.latitude;
                    // 将经纬对加入data
                    for (let key in data[i]) {
                        data[i].lon = lon;
                        data[i].lat = lat
                    }
                });
                $('#map1').highcharts('Map', {
                    title: {
                        text: '标点的方法1--用经纬度进行标点type:mappoint(缺点-给香港地图标点图会很小)'
                    },
                    mapNavigation: {
                        enabled: true
                    },
                    // 放大缩小
                    mapNavigation: {
                        enabled: true,
                        buttonOptions: {
                            verticalAlign: 'bottom',
                            align: 'right'
                        }
                    },
                    tooltip: {
                        headerFormat: '',
                        pointFormat: '{point.name}
value: {point.value}'
}, colorAxis: { min: 0, minColor: "rgb(255,255,255)", maxColor: "#006cee" }, series: [ { // 引入的地图 mapData: mapData, name: 'mapname', showInLegend: false, }, { // Specify points using lat/lon (进行标点 数据要有经纬度) type: 'mappoint', mapData: mapData, name: 'Cities', data: data, joinBy: 'name' //让data里的name 与数据里的name对应 }], }); }) 方法2 var data2 = [ { name: "北京", value: 199 }, { name: "天津", value: 42 }, { name: "河北", value: 102 }, { name: "山西", value: 81 }, { name: "内蒙古", value: 47 }, { name: "辽宁", value: 67 }, { name: "吉林", value: 82 }, { name: "黑龙江", value: 123 }, ] $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function (mapData) { $('#map2').highcharts('Map', { title: { text: '标点的方法2--用数据标签直接标点dataLabels---formatter' }, mapNavigation: { enabled: true }, // 放大缩小 mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom', align: 'right' } }, tooltip: { headerFormat: '', pointFormat: '{point.name}
value: {point.value}'
}, colorAxis: { min: 0, minColor: "rgb(255,255,255)", maxColor: "#006cee" }, series: [ { // 引入的地图 mapData: mapData, name: 'mapname', showInLegend: false, data: data2, dataLabels: { enabled: true, useHTML: true,//使formatter中可以使用标签 formatter: function () { if (this.point.value != null) { return '
'
+ this.point.name + ":" + this.point.value; } else { return this.point.name } }, color: "#000", fontSize: 16 }, joinBy: "name" // 根据 name 属性进行关联 }, ], }); }) });

你可能感兴趣的:(web前端)