基於百度地圖做動態路線打點
阿新 • • 發佈:2019-02-16
// 百度地圖API功能
// 百度地圖獲取容器
var mp = new BMap.Map("allmap");
// 百度地圖定義中心點
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 15);
// 百度地圖滾輪可縮放
mp.enableScrollWheelZoom();
// 複雜的自定義覆蓋物(建構函式)
function ComplexCustomOverlay(point, text, mouseoverText,index,linetext,linecolor){
this ._point = point; // 經緯度
this._text = text; // 顯示文字
this._overText = mouseoverText; // 滑鼠移入後顯示的文字
this._index = index // 表示第幾個點
this._linetext = linetext;
this._linecolor = linecolor;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();// 繼承百度覆蓋物
ComplexCustomOverlay.prototype.initialize = function (map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = this._linecolor;
div.style.color = "white";
div.style.height = "50px" ;
div.style.width = "50px";
div.style.borderRadius = '50%';
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px";
div.style.opacity = 1;
div.className = 'circleDiv'+this._linetext+this._index +' animated pulse infinite'
div.onmouseover = function(){
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
}
div.onmouseout = function(){
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
}
mp.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var date = [{'linedata': [39.92501, 39.926101 ,39.927101, 39.928101, 39.929101, 39.930101, 39.931101, 39.932101, 39.933101, 39.934101, 39.935101],'linecolor':'#000','linetext':'line1'},{'linedata': [39.91901, 39.918101 ,39.917101, 39.916101, 39.915101, 39.914101, 39.913101, 39.122101, 39.911101, 39.910101, 39.909101],'linecolor':'blue','linetext':'line2'}
];
date.forEach(function(value){
adddot(value)
})
function adddot(data){
// 一條線路的打點
for (var i in data.linedata) {
// 閉包
(function(i,data) {
setTimeout(function() {
// 每隔3s建立一個點
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845, data.linedata[i]), "",'mousetext',i,data.linetext,data.linecolor);
mp.addOverlay(myCompOverlay);
// 打第二個開始
// console.log(i);
(function(j,linetext){
// 第一個打點不做任何操作
if(i >= 1){
// 遍歷當前點前面的點
for (var j=1;j<=i;j++) {
var currentdom = document.getElementsByClassName('circleDiv'+linetext+(i-j))
console.log(i-j)
// 當前面的點因為透明度小於0的時候節點被刪除,所以當點存在時每個點減去0.2的透明度
if(currentdom[0]){
currentdom[0].style.opacity = currentdom[0].style.opacity - 0.2
// 依次減淡 當透明度小於0是刪除這個點
if(currentdom[0].style.opacity <= 0){
console.log('move')
currentdom[0].parentNode.removeChild(currentdom[0])
}
}
}
}
// 當打到最後一個點的時候
if(i ==data.length-1){
}
})(i,data.linetext)
}, i*(10/data.linedata.length)*3000);
})(i,data)
}
}