百度地图之拆线与自定义覆盖物
html:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拆线与自定义覆盖物</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oWbN3CdN6Bpnucw9Xi8eWHD380KUSLP6"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
style:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
html,
body {
margin: 0;
width: 100%;
height: 100%;
background: #ffffff;
}
#map {
width: 100%;
height: 100%;
}
.anchorBL {
display: none ;
}
js(重点，快记！)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
// 数据源
var data = [{
point: [113.372462, 23.136419],
color: '#22d378'
}, {
point: [113.376001, 23.135422],
color: '#e98b19'
}, {
point: [113.376612, 23.132996],
color: '#00b5e3'
}, {
point: [113.372893, 23.133711],
color: '#d01919'
}];
var map = new BMap.Map("map", {}); // 创建Map实例
// 计算地图的中心点
var d_x = 0;
var d_y = 0;
data.map(function(val) {
d_x += val.point[0],
d_y += val.point[1]
});
d_x /= data.length;
d_y /= data.length;
map.centerAndZoom(new BMap.Point(d_x, d_y), 18); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.enableDragging();
// 自定义覆盖物
function ComplexCustomOverlay(point, index, color, zIndex) {
this._point = point;
this.index = index;
this.color = color;
this.zIndex = zIndex;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map) {
this._map = map;
var el_num = document.createElement("div");
el_num.style.position = "absolute";
el_num.style.width = "14px";
el_num.style.height = "14px";
el_num.style.margin = "8px 0 0 8px";
el_num.style.background = "#fff";
el_num.style.borderRadius = "50%";
el_num.style.webkitTransform = "translate3d(0,0,0) rotate(45deg)";
el_num.style.mozTransform = "translate3d(0,0,0) rotate(45deg)";
el_num.style.oTransform = "translate3d(0,0,0) rotate(45deg)";
el_num.style.transform = "translate3d(0,0,0) rotate(45deg)";
el_num.style.fontSize = "12px";
el_num.style.textAlign = "center";
el_num.style.lineHeight = "14px";
el_num.style.color = "#000";
el_num.style.whiteSpace = "nowrap";
el_num.style.overflow = "hidden";
el_num.innerHTML = this.index;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.width = "30px";
div.style.height = "30px";
div.style.background = this.color || '#22d378';
div.style.borderRadius = "50% 50% 50% 0";
div.style.zIndex = this.zIndex;
div.style.webkitTransform = "translate3d(0,0,0) rotate(-45deg)";
div.style.mozTransform = "translate3d(0,0,0) rotate(-45deg)";
div.style.oTransform = "translate3d(0,0,0) rotate(-45deg)";
div.style.transform = "translate3d(0,0,0) rotate(-45deg)";
div.appendChild(el_num);
map.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 - 15) + "px";
this._div.style.top = (pixel.y - 35) + "px";
}
var pt_arr = [];
for (var index = 0; index < data.length; index++) {
var _item = data[index];
var _point = new BMap.Point(_item.point[0], _item.point[1]);
pt_arr.push(_point)
var myCompOverlay = new ComplexCustomOverlay(_point, index + 1, _item.color, data.length - index);
// 添加标点
map.addOverlay(myCompOverlay);
}
var polyline = new BMap.Polyline(pt_arr, {
strokeColor: '#e0a75d'
});
// 创建拆线
map.addOverlay(polyline);
dome
有用就赏一下吧 😃