BIGEMPA Js API示例中心
点线面基本示例源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <link href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
    <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>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

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

        .tool_bar {
            position: absolute;
            right: 50px;
            top: 20px;
            z-index: 9;
        }
    </style>
    <title>Google Map Streets</title>
</head>
<body>
<div class="tool_bar">
    <p>
        <button onclick="showF()" id="add_marker" class="button button-tiny button-rounded button-primary">显示所有
        </button>
    </p>
    <p>
        <button onclick="hideF()" id="remove_marker" class="button button-tiny button-rounded button-caution">删除所有
        </button>
    </p>
</div>

<div id='map'></div>
<script>
    // 软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
    BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
    // 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.zhongkexingtu，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
    var map = BM.map('map', 'bigemap.zhongkexingtu', {
        center: [23, 110],
        zoom: 5,
        zoomControl: true,
        attributionControl: false
    });

    //添加一个标注，关于标注的相关API，请参见 http://www.bigemap.com/offlinemaps/api/#marker
    var marker = BM.marker([20, 104], {draggable: true, title: '测试'}).addTo(map);


    //添加一个圆点标记，关于标注的相关API，请参见 http://www.bigemap.com/offlinemaps/api/#circlemarker
   var circlemarker =  BM.circleMarker([21, 90.5], {radius: 200,color:"red",fillColor: "pink"}).addTo(map);


    //线段的坐标点
    var latlngs = [
        [10, 102.68],
        [14, 108.43],
        [15, 118.2]
    ];
    //创建线段，并设置颜色为红色，具体请参见 :http://www.bigemap.com/offlinemaps/api/#polyline
    var polyline = BM.polyline(latlngs, {color: 'red'}).addTo(map);
    //添加两条虚线
    var dashline = BM.polyline(latlngs.map((point) => [point[0] + 1, point[1]]), {
        color: 'blue',
        dashArray: [20, 5]
    }).addTo(map);


    //多边形的坐标点
    var latlngs = [
        [30, 102.68],
        [37, 108.43],
        [37.04, 118.2]
    ];
    //创建多边形，并设置填充颜色为红色 ，具体详细API请参见：http://www.bigemap.com/offlinemaps/api/#polygon
    var polygon = BM.polygon(latlngs,
        {
            color: 'red',
            fillColor: "green",
            fillOpacity: 1
        }).addTo(map);

    function showF() {
        marker.addTo(map);
        polyline.addTo(map);
        dashline.addTo(map);
        polygon.addTo(map)
        circlemarker.addTo(map)

    }


    function hideF() {
        marker.remove();
        polyline.remove();
        dashline.remove();
        polygon.remove();
        circlemarker.remove()
    }
</script>
</body>
</html>