【百度地图】海量数据流畅加载并点击显示点位详情

心酱儿

已于 2022-04-28 14:37:16 修改

阅读量7.3k

点赞数 3

分类专栏：百度地图文章标签：前端

于 2020-06-28 13:42:19 首次发布

本文链接：https://blog.csdn.net/wbx_wlg/article/details/106995175

版权

百度地图专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在地图开发中，如果label或marker覆盖物数据较大的话经常会造成页面卡顿，现在使用百度地图添加海量星的方法来添加覆盖物，应用后发现，该方法是将所有的覆盖物绘制成一张图片，这样在数据加载中大大提升了加载速度，为了运行方便将该实例直接写到百度地图demo的运行台中，运行结果可直接将代码复制到百度地图示例demo中（百度地图加载海量星）具体方法如下：

<!DOCTYPE HTML>
<html>
<head>
    <title>加载海量点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        .modelTitle {
            background: #1e9fff;
            line-height: 30px;
            color: #fff;
            text-indent: 10px;
        }

        .popup-tip-container {
            width: 40px;
            height: 20px;
            position: absolute;
            left: 45%;
            overflow: hidden;
            pointer-events: none;
        }

        .popup-tip {
            width: 17px;
            height: 17px;
            padding: 1px;
            margin: -10px auto 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            background: #f2f2f2;
            color: #333;
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <script type="text/javascript" src="/jsdemo/data/points-sample-data.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    window.lastInfoBox = null;//点位详情窗体
    var map = new BMap.Map("map", {});   // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                        //启用滚轮放大缩小
    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var siteData = [], point = [];  // 添加海量点数据
        for (var i = 0; i < data.data.length; i++) { //siteData为接口返回数据，此处用百度地图生成随机数
            siteData.push({center: new BMap.Point(data.data[i][0], data.data[i][1]), count: i});
        }
        for (var x = 0; x < siteData.length; x++) {
            points.push(siteData[x].center); //数据的经纬度集合
        }
        console.log(points);
        var options = {
            size: BMAP_POINT_SIZE_SMALL,
            shape: BMAP_POINT_SHAPE_STAR,
            color: '#d340c3'
        };
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
        pointCollection.addEventListener('click', function (e) {
            // console.log('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
            var data = '';//弹窗信息
            //由于海量星中具体某个点不能存储其他数据，故用循环的方法，将经纬度匹配来获取点位数据
            for (var i = 0; i < siteData.length; i++) {
                if (points[i].lng == e.point.lng && points[i].lat == e.point.lat) {
                    data = siteData[i];
                    break;
                }
            }
            var tmpPt = new BMap.Point(e.point.lng, e.point.lat);
            var info = '<div class="popup"><div class="popup-content-wrapper"><div class="popup-content">' +
                '<div class="map-air-quality-popup map-popup-model">' +
                '<div class="header modelTitle"><div class="text-center">点位详情</div></div>' +
                '<div class="popup-info" style="padding: 10px"><div class="siteDataArea">个数：' + data.count + '</div></div>' +
                '<div class="popup-tip-container"><div class="popup-tip"></div></div>' +
                '</div>';
            var infoBox = new BMapLib.InfoBox(map, info, {
                boxStyle: {
                    width: "220px",
                    Height: "340px",
                    backgroundColor: "white"
                },
                offset: new BMap.Size(0, 0),
                closeIconMargin: "12px 8px 4px 4px",
                enableAutoPan: true,
                align: INFOBOX_AT_TOP
            });
            if (lastInfoBox) {
                lastInfoBox.close(); //只保留一个信息窗体
            }
            lastInfoBox = infoBox;
            infoBox.open(tmpPt);

        });
        map.addOverlay(pointCollection);  // 添加Overlay
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
</script>
</body>
</html>

二、效果图：

在这里插入图片描述

心酱儿

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
【百度地图】海量数据流畅加载并点击显示点位详情

在地图开发中，如果label或marker覆盖物数据较大的话经常会造成页面卡顿，现在使用百度地图添加海量星的方法来添加覆盖物，应用后发现，该方法是将所有的覆盖物绘制成一张图片，这样在数据加载中大大提升了加载速度，为了运行方便将该实例直接写到百度地图demo的运行台中，运行结果可直接将代码复制到百度地图示例demo中（百度地图加载海量星）具体方法如下：<!DOCTYPE HTML><html><head> <title>加载海量点</titl
复制链接

扫一扫

专栏目录