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/Public/css/button.min.css" rel="stylesheet">
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
    <!--
        JS地址請使用：
        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>
    <!--
        引用插件，對應下載地址：
        http://www.xawiki.com/Public/offline/track.zip
    -->
    <script type="text/javascript" src="http://www.xawiki.com/Public/offline/js/moveMarker.js"></script>
    <script type="text/javascript" src="http://www.xawiki.com/Public/offline/js/bm.geometryutil.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

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

        #control {
            background-color: #eee;
            padding: 15px;
            position: absolute;
            bottom: 0;
            right: 20px;
            z-index: 9;
        }

        .button {
            width: 200px;
            display: inline-block;
        }

        .pand {
            position: absolute;
            z-index: 8;
            left: 10%;
        }

        .popTable {
            max-height: 576px;
            padding: 5px;
            border-radius: 5px;
        }

        .popTable .img {
            min-width: 120px;
            min-height: 160px;
        }
        .popTable .img>img{
            width: 100%;
        }
        .popTable .placetitle>p {
            position: relative;
        }

        .popTable .rating {
            color: rgb(240, 100, 100);
        }

        .popTable .poiclassify {
            padding-top: -20px;
            font-size: 10px;
            color: gray;
        }

        .popTable .placetitle {
            position: relative;
            height: 60px;
            margin-top: -40px;
            width: 100%;
            z-index: 10;
            color: #333;
            background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .97) 0, #fff 25%, #fff);
        }

        .popTable .bigemap-popup-content-wrapper {
            background-color: whitesmoke;
        }
    </style>
    <title>Google Map Streets</title>
</head>

<body>
    <div id="control">
        <p>軌跡控制</p>
        <div>
            <a class="button button-tiny button-rounded button-primary" href="javascript:void (0)">
                開始
            </a>
        </div>
        <div>
            <a class="button button-tiny button-rounded button-primary" href="javascript:void (0)">
                暫停
            </a>
        </div>
        <div>
            <a class="button button-tiny button-rounded button-primary" href="javascript:void (0)">
                繼續
            </a>
        </div>
        <div>
            <a class="button button-tiny button-rounded button-primary" href="javascript:void (0)">
                加速
            </a>
        </div>
        <div>
            <a class="button button-tiny button-rounded button-primary" href="javascript:void (0)">
                減速
            </a>
        </div>
    </div>
    <div id='map'></div>
    <div class="popTable pand">

    </div>
    <script>
        // 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
        BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
        // 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.zhongkexingtu，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
        var map = BM.map('map', 'bigemap.dc-satellite', {
            crs: BM.CRS.EPSG4326,
            center: [30.4, 104.5],
            zoom: 7,
            zoomControl: true,
            attributionControl: false
        });
        var el = document.querySelectorAll('.button');
        var polyline = BM.polyline([
            [30, 104],
            [30.1, 104.2],
            [30.1, 104.3],
            [30.2, 104.3]
        ]).addTo(map);
        map.fitBounds(polyline.getBounds());
        var m = BM.marker([30, 104], {
            icon: BM.icon({
                iconUrl: 'http://www.xawiki.com/Public/offline/car.png',
                iconAnchor: [25, 15],
            })
        }).addTo(map);
        var scene = [
        {
            url: 'http://aos-cdn-image.amap.com/sns/ugccomment/66bb34c5-d369-48da-b631-6dbd218140f2.jpg',
            name: '永安湖城市森林公園',
            address: '成都市雙流區G108(生物城中路二段)',
            scroe: '4.7',
        },
        {
            url: 'http://store.is.autonavi.com/showpic/49b017c00a88ae9200fd16922be3825c?type=pic',
            name: '天府芙蓉園',
            address: '成都市武侯區簇馬路一段69號',
            scroe: '4',
        },
        {
            url: 'http://aos-cdn-image.amap.com/sns/ugccomment/1d1597a3-3413-4643-b952-ef7ebf009c70.jpg?type=pic',
            name: '興隆湖濕地公園',
            address: '四川省成都市天府新區興隆街道湖畔路北段',
            scroe: '4'
        },
        {
            url: '//store.is.autonavi.com/showpic/0d7c219b6137e236783da63b37bdebb4?type=pic',
            name: '白鷺灣濕地公園',
            address: '四川省成都市錦江區錦江環城生態區',
            scroe: '4'
        },
        ],
            index;
        var cn = BM.marker(map.getCenter()).addTo(map);
        cn.bindPopup(`
        <header class="placeimg">
            <div class="img">
                <img src="${scene[0].url}"></img>
            </div>
        </header>
        <section class="placetitle">
            <h3 class="poiname">${scene[0].name}</h3>
            <p >
                <span class="rating">${scene[0].scroe}<b>/5</b></span>
                <span class="poiclassify">公園</span>
            </p>
        </section>
        <footer>
            <p></span><img src="/Public/offline/js/m.svg" style="vertical-align:middle;margin-right:5px"></span>${scene[0].address}</p>
        </footer>
`, {
            className: 'popTable', closeButton: false
        })
        //添加一條線段也記錄已經路過的點
        var passed = BM.polyline([
            []
        ], {
            color: 'red'
        }).addTo(map);
        m.on('update_position', function (e) {
            //每次坐標更新。然后也更新路徑
            passed.setLatLngs(e.path);
            //map.setView(m.getLatLng());
            if (e.index != index) {
                console.log(e.index);
                index = Number(e.index);
                if (!m.getPopup()) {
                    m.bindPopup(`
                        <header class="placeimg">
                            <div class="img">
                                <img src="${scene[0].url}"></img>
                            </div>
                        </header>
                        <section class="placetitle">
                            <h3 class="poiname">${scene[index].name}</h3>
                            <p>
                            </span><img src="/Public/offline/js/m.svg" style="vertical-align:middle;margin-right:5px"></span>
                                <span class="rating">${scene[index].scroe}<b>/5</b></span>
                                <span class="poiclassify">公園</span>
                            </p>
                        </section>
                        <footer>
                            <p></span><img src="/Public/offline/js/m.svg" style="vertical-align:middle;margin-right:5px"></span>${scene[index].address}</p>
                        </footer>
                    `, {
                        className: 'popTable', closeButton: false,offset:[-5,-5]
                    });
                    m.openPopup()
                } else {
                    m.setPopupContent(`
                        <header class="placeimg">
                            <div class="img">
                                <img src="${scene[index].url}"></img>
                            </div>
                        </header>
                        <section class="placetitle">
                            <h3 class="poiname">${scene[index].name}</h3>
                            <p >
                                <span class="rating">${scene[index].scroe}<b>/5</b></span>
                                <span class="poiclassify">公園</span>
                            </p>
                        </section>
                        <footer>
                            <p></span><img src="./標注選擇器.svg" style="vertical-align:middle;margin-right:5px"></span>${scene[index].address}</p>
                        </footer>
                    `);
                    m.openPopup();
                }
            }
        });

        el[0].onclick = function () {
            //默認是循環回放 replay:true
            m.moveAlong(polyline, 500, {
                replay: false
            });
        };

        el[1].onclick = function () {
            m.pauseMove();
        };
        el[2].onclick = function () {
            try {
                m.resumeMove();
            } catch (error) {
                alert('先點擊開始才能點擊繼續哦')
            }
        };
        el[3].onclick = function () {
            m.setSpeed(m.getSpeed() + 300);
        };
        el[4].onclick = function () {
            m.setSpeed(m.getSpeed() - 100);
        };
    </script>
</body>

</html>