百度地图路线回放
程序员文章站
2022-07-03 18:12:51
...
百度地图路线回放
效果图
直接可以运行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
body, html,#allmap {width: 100%;height: 95%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
#result {width:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写你的秘钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<title>xd运输路径</title>
</head>
<body>
<div id="allmap"></div>
<div id="result"></div>
<button id="run" >开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
</body>
<script>
//百度地图API功能
var map = new BMap.Map("allmap",{
enableClicking:false
});
map.enableScrollWheelZoom(true);
//获取数据
//获取驾车获取数据
var drv=new BMap.DrivingRoute('西安', {
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0);
var arrPois =[];//地图点数据
for(var j=0;j<plan.getNumRoutes();j++){
var route = plan.getRoute(j);
arrPois= arrPois.concat(route.getPath());
//模拟添加经过时间
for(var i=0;i<arrPois.length;i++){
var date = new Date(1573199501722+i*1000*60).toLocaleString();
arrPois[i].gpsTime=date;
}
//添加轨迹
addRoute(arrPois);
}
;
}
}
});
//获取数据
var start = new BMap.Point(108.953412,34.265612); //起点
var end = new BMap.Point(108.97109,34.225341); //终点
drv.search(start, end);
var lushu; //路书
//添加路线
function addRoute(data){
var points = [];//点信息数组
var landmarkPois = [];//路书需要数组
var startTime="";
for(var i=0;i<data.length;i++){
var p= new BMap.Point(data[i].lng, data[i].lat);
if(i==0){ //起点
addMarker(p,data[i].gpsTime,false);
map.centerAndZoom(p, 14);
startTime=data[i].gpsTime;
}else if(i==data.length-1){ //止点
addMarker(p,data[i].gpsTime,false);
}else if(i%Math.round(data.length/10)==0){//其他点
addMarker(p,data[i].gpsTime,false);
}else{
addMarker(p,data[i].gpsTime,true);
}
points.push(p);
//路书特殊点（显示经过时间）
landmarkPois.push(new landmark(data[i].lng, data[i].lat,data[i].gpsTime,0.1));
}
//画线
addLine(points);
//设置点全部在视野中
map.setViewport(points);
//路书
lushu = new BMapLib.LuShu(map,points,{
defaultContent:startTime,
autoView:true,// 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 4500,
enableRotation:true,// 是否设置marker随着道路的走向进行旋转
landmarkPois: landmarkPois
});
}
// 添加点
function addMarker(point,gpsTime,b){
//设置marker图标为水滴
var marker = new BMap.Marker(new BMap.Point(point.lng,point.lat), {
// 指定Marker的icon属性为Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1,//图标缩放大小
fillColor: "orange",//填充颜色
fillOpacity: 0.8//填充透明度
})
});
map.addOverlay(marker);
if(b)
marker.hide();
var label = new BMap.Label("时间:"+gpsTime+"<br/>位置:"+ marker.getPosition().lng + "," + marker.getPosition().lat,
{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
label.hide();
marker.addEventListener("mouseover",onMouseover);//鼠标进入事件
marker.addEventListener("mouseout",onMouseout);//鼠标移出事件
}
//画线
function addLine(points){
//画线
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.6,//图标缩放大小
strokeColor:'#fff',//设置矢量图标的线填充颜色
strokeWeight: '1',//设置线宽
});
var icons = new BMap.IconSequence(sy, '100%', '4%');
var polyline =new BMap.Polyline(points, {
enableEditing: false,//是否启用线编辑，默认为false
enableClicking: true,//是否响应点击事件，默认为true
icons:[icons],
strokeWeight:'5',//折线的宽度，以像素为单位
strokeOpacity: 0.9,//折线的透明度，取值范围0 - 1
strokeColor:"#40D6F9" //折线颜色
});
map.addOverlay(polyline); //增加折线
}
//鼠标进入事件
function onMouseover(e){
var p = e.target;
p.getLabel().show();
}
//鼠标移出事件
function onMouseout(e){
var p = e.target;
p.getLabel().hide();
}
//绑定事件
$("run").onclick = function(){
lushu.start();
}
$("stop").onclick = function(){
lushu.stop();
}
$("pause").onclick = function(){
lushu.pause();
}
$("hide").onclick = function(){
lushu.hideInfoWindow();
}
$("show").onclick = function(){
lushu.showInfoWindow();
}
function $(element){
return document.getElementById(element);
}
//路书经过点
function landmark(lng,lat,html,pauseTime){
this.lng=lng;
this.lat=lat;
this.html=html;
this.pauseTime=pauseTime;
}
</script>
</html>
上一篇： Spring Cloud Config