BIGEMPA Js API示例中心
點(diǎn)線面基本示例源代碼展示

代碼編輯區(qū) 運(yùn)行下載還原
<!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地址請(qǐng)?jiān)诎惭b軟件了替換成本地的地址
        CSS地址請(qǐng)使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
    -->
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
    <!--
        JS地址請(qǐng)使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src="http://ua.bigemap.com:30081/bmsdk/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://ua.bigemap.com:30081/bmsdk/"
    // 在ID為map的元素中實(shí)例化一個(gè)地圖，并設(shè)置地圖的ID號(hào)為 bigemap.zhongkexingtu，ID號(hào)程序自動(dòng)生成，無(wú)需手動(dòng)配置，并設(shè)置地圖的投影為百度地圖 ，中心點(diǎn)，默認(rèn)的級(jí)別和顯示級(jí)別控件
    var map = BM.map('map', 'bigemap.dc-satellite', {
        crs: BM.CRS.EPSG4326,
        center: [23, 110],
        zoom: 5,
        zoomControl: true,
        attributionControl: false
    });

    //添加一個(gè)標(biāo)注，關(guān)于標(biāo)注的相關(guān)API，請(qǐng)參見(jiàn) http://www.xawiki.com/offlinemaps/api/#marker
    var marker = BM.marker([20, 104], {draggable: true, title: '測(cè)試'}).addTo(map);


    //添加一個(gè)圓點(diǎn)標(biāo)記，關(guān)于標(biāo)注的相關(guān)API，請(qǐng)參見(jiàn) http://www.xawiki.com/offlinemaps/api/#circlemarker
   var circlemarker =  BM.circleMarker([21, 90.5], {radius: 200,color:"red",fillColor: "pink"}).addTo(map);


    //線段的坐標(biāo)點(diǎn)
    var latlngs = [
        [10, 102.68],
        [14, 108.43],
        [15, 118.2]
    ];
    //創(chuàng)建線段，并設(shè)置顏色為紅色，具體請(qǐng)參見(jiàn) :http://www.xawiki.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);


    //多邊形的坐標(biāo)點(diǎn)
    var latlngs = [
        [30, 102.68],
        [37, 108.43],
        [37.04, 118.2]
    ];
    //創(chuàng)建多邊形，并設(shè)置填充顏色為紅色 ，具體詳細(xì)API請(qǐng)參見(jiàn)：http://www.xawiki.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>