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: '<b>{point.name}</b><br>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: '<b>{point.name}</b><br>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 '<div style="display:inline-block; width:10px;height:10px;border-radius: 50%;background-color:blue"></div>' + this.point.name + ":" + this.point.value;
                                    } else {
                                        return this.point.name
                                    }
                                },
                                color: "#000",
                                fontSize: 16
                            },
                            joinBy: "name" // 根据 name 属性进行关联
                        },
                    ],
                });
            })
        });