腾讯地图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