想通过改变下拉框的值，自定义百度地图路书的播放速度

碎调122 2018-03-14 04:18:36

想通过改下拉框的选中，从而改变速度

代码贴上：
$('#speed').change(function () {//改变下拉框的选中
speeds=$('#speed').val();//下拉框的值

map.clearOverlays();//清除已经画的线
（这里不会写）//清除即将画的线，即停止路书继续画线
play();
})

function play() {
map.setViewport(arrPois);
marker = new BMap.Marker(arrPois[0], {
icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) })
});
var label = new BMap.Label("京A30780", { offset: new BMap.Size(0, -30) });
label.setStyle({ border: "1px solid rgb(204, 204, 204)", color: "rgb(0, 0, 0)", borderRadius: "10px", padding: "5px", background: "rgb(255, 255, 255)", });
marker.setLabel(label);

map.addOverlay(marker);
BMapLib.LuShu.prototype._move = function (initPos, targetPos, effect) {
var pointsArr = [initPos, targetPos]; //点数组
var me = this,
//当前的帧数
currentCount = 0,
//步长，米/秒
timer = 10,
step = this._opts.speed / (1000 / timer),
//初始坐标
init_pos = this._projection.lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = this._projection.lngLatToPoint(targetPos),
//总的步长
count = Math.round(me._getDistance(init_pos, target_pos) / step);
//显示折线 syj201607191107
this._map.addOverlay(new BMap.Polyline(pointsArr, {
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 0.5
})); // 画线
//如果小于1直接移动到下一点
if (count < 1) {
me._moveNext(++me.i);
return;
}
me._intervalFlag = setInterval(function () {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount >= count) {
clearInterval(me._intervalFlag);
//移动的点已经超过总的长度
if (me.i > me._path.length) {
return;
}
//运行下一个点
me._moveNext(++me.i);
} else {
currentCount++;
var x = effect(init_pos.x, target_pos.x, currentCount, count),
y = effect(init_pos.y, target_pos.y, currentCount, count),
pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
//设置marker
if (currentCount == 1) {
var proPos = null;
if (me.i - 1 >= 0) {
proPos = me._path[me.i - 1];
}
if (me._opts.enableRotation == true) {
me.setRotation(proPos, initPos, targetPos);
}
if (me._opts.autoView) {
if (!me._map.getBounds().containsPoint(pos)) {
me._map.setCenter(pos);
}
}
}
//正在移动
me._marker.setPosition(pos);
//设置自定义overlay的位置
me._setInfoWin(pos);
}
}, timer);
};
//var speeds = $("speed").val();
//var speeds = 6500;
lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent: "京A30780",//"从天安门到百度大厦"
autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) }),
speed: speeds,
enableRotation: true,//是否设置marker随着道路的走向进行旋转
landmarkPois: [
{ lng: 116.306954, lat: 40.05718, html: '加油站', pauseTime: 2 }
]

});
map.centerAndZoom(arrPois[0], 15);//设置初始点为中心
marker.addEventListener("click", function () {
marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
marker.hide();
lushu.start();
//map.clearOverlays(); //清除所有覆盖物
});
//绑定事件
$("run").onclick = function () {
marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
marker.hide();
lushu.start();
// map.clearOverlays(); //清除所有覆盖物
}
$("stop").onclick = function () {
lushu.stop();
map.clearOverlays();
}
$("pause").onclick = function () {
lushu.pause();
}
$("hide").onclick = function () {
lushu.hideInfoWindow();
}
$("show").onclick = function () {
lushu.showInfoWindow();
}
function $(element) {
return document.getElementById(element);
}

}

...全文