BIGEMPA Js API示例中心
大量数据展示源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
        以下CSS地址请在安装软件了替换成本地的地址
        CSS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
    -->
    <link
            href="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css"
            rel="stylesheet"
    />
    <!--
        JS地址请使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
    <script
            type="text/javascript"
            src="http://www.bigemap.com/mapoffline/canvas-layer/canvas-layer.js"
    ></script>

    <link
            href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css"
            rel="stylesheet"
    />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .tool {
            position: absolute;
            z-index: 10;
            right: 10px;
            top: 40px;
        }

        .tips {
            position: absolute;
            z-index: 1;
            background-color: white;
            padding: 20px;
            top: 150px;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <title>Baidu Map</title>
</head>
<body>
<div id="map"></div>
<div class="tips">
    文档地址： <a href="http://www.bigemap.com/mapoffline/canvas-layer/doc/global.html">http://www.bigemap.com/mapoffline/canvas-layer/doc/global.html</a>
    <br>
    <br>

    插件js下载地址 <a href="http://www.bigemap.com/mapoffline/canvas-layer/canvas-layer.js">http://www.bigemap.com/mapoffline/canvas-layer/canvas-layer.js</a>
</div>
<p class="tool">
    <button

            onclick="showF()"
            class="button button-tiny button-rounded button-primary"
            href="javascript:void (0);"
    >
        标记显示
    </button>
    <button

            onclick="hideF()"
            class="button button-tiny button-rounded button-primary"
            href="javascript:void (0);"
    >
        标记隐藏
    </button>
    <button

            onclick="clearLayers()"
            class="button button-tiny button-rounded button-primary"
            href="javascript:void (0);"
    >
        清除标记
    </button>
</p>
<script>
    // 软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
    BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
    // 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.baidu-map，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
    var map = BM.map("map", "bigemap.amap-map", {
        center: [39.905963, 116.390813],
        zoom: 11,
        zoomControl: true,
        attributionControl: false,
    });
    // 文档地址  http://www.bigemap.com/mapoffline/canvas-layer/doc/global.html

    //注意！！ 只需要初始化一次  利用返回的对象接受 删除数据即可
    var layer = new BM.CanvasMarkerLayer({
        drawTooltip: true,
        minZoom: 0,
        font: "12px Helvetica Neue",
        fillStyle: "#369",
    });
    layer.addTo(map);

    //注意！！ 需要使用自定义图标进行绘制 默认图标不生效！
    var icon = BM.icon({
        iconUrl: "http://www.bigemap.com/mapoffline/marker/11.png",
        iconSize: [30, 30],
        iconAnchor: [15, 30],
    });

    var mm = [];

    var line_arr = [];
    for (var i = 0; i < 10000; i++) {
        var lat = 39.905963 + (Math.random() - Math.random()) * 3;
        var lng = 116.390813 + (Math.random() - Math.random()) * 3;
        var marker;
        if (i % 20 == 0) {
            if (line_arr.length == 2) {
                //BM.polyline(line_arr, { color: "red" }).addTo(map);
                line_arr.length = 0;
            }
            line_arr.push([lat, lng]);
        }
        var marker;
        marker = BM.marker([lat, lng], {icon: icon})
            .bindTooltip("tooltip" + i)
            .bindPopup("I Am " + i); //绑定气泡窗口

        //定义自定义内容
        marker.id = i;
        //添加到数组里 生成marker后 统一 添加
        mm.push(marker);
    }

    //批量添加 数组格式
    layer.addLayers(mm);

    //单个增加 数量多的话 会影响效率 建议数组方式添加
    //   layer.addLayer(BM.marker([30,104],{icon:icon}));

    //右键事件
    layer.addOnContextMenuListener(function (e, l) {
        //e.layer 标记对象
        layer.removeLayer(e.layer);
    });


    //鼠标移入事件
    layer.addOnHoverListener(function (e) {
        console.log(e.layer);
    });

    //鼠标点击事件
    layer.addOnClickListener(function (e) {
        console.log(e.layer);
        alert(e.layer.id)
    });

    function showF() {
        layer.addTo(map)
    }

    function hideF() {
        layer.remove()
    }

    function clearLayers() {
        //清楚所有
        layer.clearLayers()

        //清楚单个layer
        // layer.removeLayer(marker)
    }

</script>
</body>
</html>