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/Public/css/button.min.css" rel="stylesheet">
    <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>
    <!--
        引用插件,对应下载地址:
        http://www.bigemap.com/Public/offline/track.zip
    -->
    <script type="text/javascript" src="http://www.bigemap.com/Public/offline/js/moveMarker.js"></script>
    <script type="text/javascript" src="http://www.bigemap.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://www.bigemap.com:9000';
        // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.zhongkexingtu,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
        var map = BM.map('map', 'bigemap.zhongkexingtu', {
            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.bigemap.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>