騰訊地圖JavascriptAPI 散點圖

時間 2019-11-11

原文原文鏈接

<style>
    #container {
        width: 100%;
        height: 100%
    }
    .circle{
        width: 14px;
        height: 14px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        float: left;
        margin-top: 3px;
        margin-right: 10px;
    }
    .green {
        background-color: #04B45F;
    }
    .gray {
        background-color: #585858;
    }
    .red {
        background-color: #FF0000;
    }
    .explain-green {
        color: #04B45F;
    }
    .explain-gray {
        color: #585858;
    }
    .explain-red {
        color: #FF0000;
    }
</style>
<body class="gray-bg">
    <div id="container"></div>
</body>

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
    $(function () {
        init();
    });

    //地圖初始化
    function init() {
        var myLatlng = new qq.maps.LatLng(39.916527, 116.397128);
        var myOptions = {
            center: myLatlng,
            noClear:true
        };
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);

        //自定義控件 - 地圖散點顏色說明
        var customZoomDiv = document.createElement("div");
        customZoomDiv.style.cssText = "padding:5px;border:2px solid #86acf2;background:#ffffff";
        customZoomDiv.index = 1; //設置在當前佈局中的位置
        function update() {
            customZoomDiv.innerHTML = '<div class="explain"><div class="circle green"></div><span class="explain-green">在線</span></div>' +
                '<div class="explain"><div class="circle gray"></div><span class="explain-gray">離線</span></div>' +
                '<div class="explain"><div class="circle red"></div><span class="explain-red">異常</span></div>';
        }
        qq.maps.event.addDomListener(map, "zoom_changed", update);
        update();
        map.controls[qq.maps.ControlPosition.LEFT_BOTTOM].push(customZoomDiv);

        //建立散點圖對象
        createDotsMap(map);
    }

    //建立散點圖對象
    function createDotsMap(map) {
        var dots = new qq.maps.visualization.Dots({
            map: map, // 必填參數，指定顯示散點圖的地圖對象
            style: {
                fillColor: "#3CF",
                strokeColor: "#00C",
                strokeWidth: 1,
                radius: 8
            }
        });

        // 獲取散點數據
        getDotsData(dots);
    }

    function getDotsData(dots) {
        // 測試數據
        // 獲取散點數據
        // var str = '[{"lat":"28.226970","lng":"112.32419","type":"online"},{"lat":"31.353637","lng":"121.201172","type":"online"},' +
        //     '{"lat":"24.48405","lng":"118.03394","type":"offline"},' +
        //     '{"lat":"23.12908","lng":"113.26436","type":"abnormal"}]';
        //
        // var coordinate = JSON.parse(str);
        // var groupBy = "type";
        // dots.setGroupStyle("online", {
        //     fillColor: "#04B45F",
        // });
        // dots.setGroupStyle("offline", {
        //     fillColor: "#585858"
        // });
        // dots.setGroupStyle("abnormal", {
        //     fillColor: "#FF0000"
        // });
        // dots.setGroupStyle("default", {
        //     fillColor: "rgba(255, 0, 0, 0)"
        // });
        // dots.setGroupBy(groupBy);

        //請求數據
        $.ajax({
            url:'xxxxxx',
            data:{},
            method:'post',
            success:function (data) {
                var coordinate = [];
                var num = data.length;
                //先插入一個默認的透明散點,防止當只有一個散點的時候出現拖動地圖/縮放地圖時散點消失的問題
                coordinate.push({lat: 22.634293, lng: 118.388672, type: 'default'});
                for (var index = 0; index < num; index++) {
                    coordinate.push({
                        lat: data[index].lat,
                        lng: data[index].lng,
                        type: data[index].type
                    });
                }
                // console.log(coordinate);
                // 向散點圖傳入數據
                dots.setData(coordinate);

                var groupBy = "type";
                dots.setGroupStyle("online", {
                    fillColor: "#04B45F",
                });
                dots.setGroupStyle("offline", {
                    fillColor: "#585858"
                });
                dots.setGroupStyle("abnormal", {
                    fillColor: "#FF0000"
                });
                dots.setGroupStyle("default", {
                    fillColor: "rgba(255, 0, 0, 0)"
                });
                dots.setGroupBy(groupBy);
            }
        });
    }


</script>

注意事項：當真實數據只有一個散點時，移動地圖/縮放地圖時散點會消失不見。須要先插入一個透明的散點防止此狀況。javascript

相關標籤/搜索

每日一句

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