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.xawiki.com/reader/download/detail201802017.html
    -->
    <link
            href="http://www.xawiki.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.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
    <script
            type="text/javascript"
            src="http://www.xawiki.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.xawiki.com/mapoffline/canvas-layer/doc/global.html">http://www.xawiki.com/mapoffline/canvas-layer/doc/global.html</a>
    <br>
    <br>

    插件js下載地址 <a href="http://www.xawiki.com/mapoffline/canvas-layer/canvas-layer.js">http://www.xawiki.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.xawiki.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.xawiki.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.xawiki.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>