百度地图之拆线与自定义覆盖物

html:

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
<!DOCTYPE html> <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 !important; }

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

有用就赏一下吧 😃

本文于 2018/4/24 下午 发布在 编程 分类下,当前已被围观 1527 次

相关标签:js

永久地址:https://blog.pandashuai.com/article/18