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>