highmaps繪製用戶分佈地圖

時間 2019-11-08

標籤 highmaps 繪製用戶分佈地圖简体版

原文原文鏈接

記錄下使用highmaps繪製用戶地圖的過程首先看效果 javascript

官方文檔寫的不清楚，不少配置項沒有標明，好比設置用戶點的顏色以及透明度css

marker: {
    fillColor: 'rgba(255,0,0,0.1)',
    radius: 9
},

rgba函數設定顏色，紅、綠、藍、透明度，最大255，透明度最大1 地圖能夠在 highmaps地圖列表找到，其中的中國地圖裏省市都是拼音，把它下載下來所有替換爲中文便可html

所有代碼以下

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
    <style type="text/css">
        #container {
            height: 1000px;
            min-width: 800px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .loading {
            margin-top: 10em;
            text-align: center;
            color: gray;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $('#container').highcharts('Map', {
                credits: {enabled: false},
                title: {text: '全國用戶分佈地圖'},
                tooltip: {pointFormat: '緯度:{point.lat}<br>' + '經度:{point.lon}<br>'},
                series: [{
                    // 圖層1 地圖
                    mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],
                    name: 'Basemap',
                    borderColor: '#A0A0A0',
                    nullColor: 'rgba(200, 200, 200, 0.3)',
                    showInLegend: false,
                    joinBy: 'hc-key',
                    dataLabels: { // 顯示各個省份的名字
                        enabled: true,
                        color: 'rgba(0,0,0,0.3)',
                        format: '{point.name}',
                        zIndex: -1
                    }
                }, {
                    // 圖層2 用戶描點
                    type: "mappoint",
                    name: "用戶",
                    marker: {
                        fillColor: 'rgba(256,0,0,0.1)', // 設置點的顏色，透明度是0.1
                        radius: 9, // 設置點大小
                    },
                    showInLegend: false,
                    data: [{
                        lat: 39.5427,
                        lon: 116.2317
                    }, {
                        lat: 39.4427,
                        lon: 114.2317
                    }, {
                        lat: 39.3427,
                        lon: 116.5317
                    }, {
                        lat: 39.2427,
                        lon: 116.2317
                    }, {
                        lat: 39.1427,
                        lon: 115.2317
                    }]
                }]
            });
        });
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。