百度地图实现测量面积和测量距离功能
Posted hexuerui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图实现测量面积和测量距离功能相关的知识，希望对你有一定的参考价值。
最近在公司的项目中，需要用到百度地图的测距和测面积功能，但是在网上只找到了测量距离的api，即BMapLib.DistanceTool。
但是测面积在网上没有找到很好的资料，百度提供的DrawingManager虽然也可以实现测面积，但是感觉太lol了，然后继续找资料，发现有人跟我遇到同样的问题，他的解决思路是对BMapLib.DistanceTool进行改造，但遗憾的是没有提供源码。
我也想过要改造BMapLib.DistanceTool，但是这个对我来说很有挑战性，毕竟js我差不多是小白，今天闲来无事，决定一试。下载了BMapLib.DistanceTool的源码看，大部分都看不懂，呵呵，不过我要做的工作就是在事件处理中加入自己的逻辑，寻着这个思路，经过几番折腾，终于搞定了，整体效果自己还比较满意。
好了，废话不多说，接下来进入重点，我把百度地图实现测量面积源码公布下（Java成长交流学习群：184998348），代码下载地址：https://download.csdn.net/download/hgq0916/10579481。分享给大家，若有大神路过，别见怪，哈哈。
首先来张效果图：
下面是源码：
1.measureAreaTool_baidu.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <style type="text/css"> 7 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} 8 #allmap {width: 100%; height:500px; overflow: hidden;} 9 #result {width:100%;font-size:12px;} 10 </style> 11 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> 12 <script src="js/GeoUtils.js" type="text/javascript"></script> 13 <script type="text/javascript" src="js/AreaTool_min.js"></script> 14 <title>百度地图API功能演示</title> 15 </head> 16 <body> 17 <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 18 <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"> 19 </div> 20 </div> 21 <div id="result"> 22 <input type="button" value="面积测量" οnclick="measureArea(this)" /><br/> 23 </div> 24 25 <script type="text/javascript"> 26 var map = new BMap.Map(‘map‘); 27 var poi = new BMap.Point(113.948913,22.530844); 28 map.centerAndZoom(poi, 16); 29 map.enableScrollWheelZoom(); 30 //添加测量面积工具 31 var measureAreaTool = createMeasureAreaTool(map); 32 //面积测量 33 var measureArea = function(e){ 34 measureAreaTool.open(); 35 } 36 </script> 37 </body> 38 </html>
2.依赖的js
2.1 百度地图的核心js文件，这个用于显示百度地图的，不多说
2.2 AreaTool_min.js 这个就是我改造百度地图测距js后自己创建的测面积工具，完成对面积的测量
1 // 百度地图API功能 2 var BMapLib = window.BMapLib = BMapLib || {}; (function() { 3 var c = c || { 4 guid: "$BAIDU$" 5 }; (function() { 6 window[c.guid] = {}; 7 c.extend = function(g, e) { 8 for (var f in e) { 9 if (e.hasOwnProperty(f)) { 10 g[f] = e[f] 11 } 12 } 13 return g 14 }; 15 c.lang = c.lang || {}; 16 c.lang.guid = function() { 17 return "TANGRAM__" + (window[c.guid]._counter++).toString(36) 18 }; 19 window[c.guid]._counter = window[c.guid]._counter || 1; 20 window[c.guid]._instances = window[c.guid]._instances || {}; 21 c.lang.Class = function(e) { 22 this.guid = e || c.lang.guid(); 23 window[c.guid]._instances[this.guid] = this 24 }; 25 window[c.guid]._instances = window[c.guid]._instances || {}; 26 c.lang.isString = function(e) { 27 return "[object String]" == Object.prototype.toString.call(e) 28 }; 29 c.lang.isFunction = function(e) { 30 return "[object Function]" == Object.prototype.toString.call(e) 31 }; 32 c.lang.Class.prototype.toString = function() { 33 return "[object " + (this._className || "Object") + "]" 34 }; 35 c.lang.Class.prototype.dispose = function() { 36 delete window[c.guid]._instances[this.guid]; 37 for (var e in this) { 38 if (!c.lang.isFunction(this[e])) { 39 delete this[e] 40 } 41 } 42 this.disposed = true 43 }; 44 c.lang.Event = function(e, f) { 45 this.type = e; 46 this.returnValue = true; 47 this.target = f || null; 48 this.currentTarget = null 49 }; 50 c.lang.Class.prototype.addEventListener = function(h, g, f) { 51 if (!c.lang.isFunction(g)) { 52 return 53 } ! this.__listeners && (this.__listeners = {}); 54 var e = this.__listeners, 55 i; 56 if (typeof f == "string" && f) { 57 if (/[^w-]/.test(f)) { 58 throw ("nonstandard key:" + f) 59 } else { 60 g.hashCode = f; 61 i = f 62 } 63 } 64 h.indexOf("on") != 0 && (h = "on" + h); 65 typeof e[h] != "object" && (e[h] = {}); 66 i = i || c.lang.guid(); 67 g.hashCode = i; 68 e[h][i] = g 69 }; 70 c.lang.Class.prototype.removeEventListener = function(g, f) { 71 if (c.lang.isFunction(f)) { 72 f = f.hashCode 73 } else { 74 if (!c.lang.isString(f)) { 75 return 76 } 77 } ! this.__listeners && (this.__listeners = {}); 78 g.indexOf("on") != 0 && (g = "on" + g); 79 var e = this.__listeners; 80 if (!e[g]) { 81 return 82 } 83 e[g][f] && delete e[g][f] 84 }; 85 c.lang.Class.prototype.dispatchEvent = function(h, e) { 86 if (c.lang.isString(h)) { 87 h = new c.lang.Event(h) 88 } ! this.__listeners && (this.__listeners = {}); 89 e = e || {}; 90 for (var g in e) { 91 h[g] = e[g] 92 } 93 var g, f = this.__listeners, 94 j = h.type; 95 h.target = h.target || this; 96 h.currentTarget = this; 97 j.indexOf("on") != 0 && (j = "on" + j); 98 c.lang.isFunction(this[j]) && this[j].apply(this, arguments); 99 if (typeof f[j] == "object") { 100 for (g in f[j]) { 101 f[j][g].apply(this, arguments) 102 } 103 } 104 return h.returnValue 105 }; 106 c.lang.inherits = function(k, i, h) { 107 var g, j, e = k.prototype, 108 f = new Function(); 109 f.prototype = i.prototype; 110 j = k.prototype = new f(); 111 for (g in e) { 112 j[g] = e[g] 113 } 114 k.prototype.constructor = k; 115 k.superClass = i.prototype; 116 if ("string" == typeof h) { 117 j._className = h 118 } 119 }; 120 c.dom = c.dom || {}; 121 c._g = c.dom._g = function(e) { 122 if (c.lang.isString(e)) { 123 return document.getElementById(e) 124 } 125 return e 126 }; 127 c.g = c.dom.g = function(e) { 128 if ("string" == typeof e || e instanceof String) { 129 return document.getElementById(e) 130 } else { 131 if (e && e.nodeName && (e.nodeType == 1 || e.nodeType == 9)) { 132 return e 133 } 134 } 135 return null 136 }; 137 c.insertHTML = c.dom.insertHTML = function(h, e, g) { 138 h = c.dom.g(h); 139 var f, i; 140 if (h.insertAdjacentHTML) { 141 h.insertAdjacentHTML(e, g) 142 } else { 143 f = h.ownerDocument.createRange(); 144 e = e.toUpperCase(); 145 if (e == "AFTERBEGIN" || e == "BEFOREEND") { 146 f.selectNodeContents(h); 147 f.collapse(e == "AFTERBEGIN") 148 } else { 149 i = e == "BEFOREBEGIN"; 150 f[i ? "setStartBefore": "setEndAfter"](h); 151 f.collapse(i) 152 } 153 f.insertNode(f.createContextualFragment(g)) 154 } 155 return h 156 }; 157 c.ac = c.dom.addClass = function(k, m) { 158 k = c.dom.g(k); 159 var f = m.split(/s+/), 160 e = k.className, 161 j = " " + e + " ", 162 h = 0, 163 g = f.length; 164 for (; h < g; h++) { 165 if (j.indexOf(" " + f[h] + " ") < 0) { 166 e += (e ? " ": "") + f[h] 167 } 168 } 169 k.className = e; 170 return k 171 }; 172 c.event = c.event || {}; 173 c.event._listeners = c.event._listeners || []; 174 c.on = c.event.on = function(f, i, k) { 175 i = i.replace(/^on/i, ""); 176 f = c._g(f); 177 var j = function(m) { 178 k.call(f, m) 179 }, 180 e = c.event._listeners, 181 h = c.event._eventFilter, 182 l, 183 g = i; 184 i = i.toLowerCase(); 185 if (h && h[i]) { 186 l = h[i](f, i, j); 187 g = l.type; 188 j = l.listener 189 } 190 if (f.addEventListener) { 191 f.addEventListener(g, j, false) 192 } else { 193 if (f.attachEvent) { 194 f.attachEvent("on" + g, j) 195 } 196 } 197 e[e.length] = [f, i, k, j, g]; 198 return f 199 }; 200 c.un = c.event.un = function(g, j, f) { 201 g = c._g(g); 202 j = j.replace(/^on/i, "").toLowerCase(); 203 var m = c.event._listeners, 204 h = m.length, 205 i = !f, 206 l, k, e; 207 while (h--) { 208 l = m[h]; 209 if (l[1] === j && l[0] === g && (i || l[2] === f)) { 210 k = l[4]; 211 e = l[3]; 212 if (g.removeEventListener) { 213 g.removeEventListener(k, e, false) 214 } else { 215 if (g.detachEvent) { 216 g.detachEvent("on" + k, e) 217 } 218 } 219 m.splice(h, 1) 220 } 221 } 222 return g 223 }; 224 c.preventDefault = c.event.preventDefault = function(e) { 225 if (e.preventDefault) { 226 e.preventDefault() 227 } else { 228 e.returnValue = false 229 } 230 } 231 })(); 232 //TODO 233 var d = BMapLib.MeasureAreaTool = function(f, e) { 234 if (!f) { 235 return 236 } 237 this._map = f; 238 e = e || {}; 239 this._opts = c.extend(c.extend(this._opts || {}, 240 { 241 tips: "u6d4bu8ddd", 242 followText: "u5355u51fbu786eu5b9au5730u70b9uff0cu53ccu51fbu7ed3u675f", 243 unit: "metric", 244 lineColor: "#ff6319", 245 lineStroke: 2, 246 opacity: 0.8, 247 lineStyle: "solid", 248 cursor: "http://api.map.baidu.com/images/ruler.cur", 249 secIcon: null, 250 closeIcon: null 251 }), e); 252 this._followTitle = null; 253 this._points = []; 254 this._paths = []; 255 this._dots = []; 256 this._segDistance = []; 257 this._overlays = []; 258 this._enableMassClear = true, 259 this._units = { 260 metric: { 261 name: "metric", 262 conv: 1, 263 incon: 1000, 264 u1: "u7c73", 265 u2: "u516cu91cc" 266 }, 267 us: { 268 name: "us", 269 conv: 3.2808, 270 incon: 5279.856, 271 u1: "u82f1u5c3a", 272 u2: "u82f1u91cc" 273 } 274 }; 275 this._isOpen = false; 276 this._startFollowText = "u5355u51fbu786eu5b9au8d77u70b9"; 277 this._movingTimerId = null; 278 this._styles = { 279 BMapLib_diso: "height:17px;width:5px;position:absolute;background:url(http://api.map.baidu.com/images/dis_box_01.gif) no-repeat left top", 280 BMapLib_disi: "color:#7a7a7a;position:absolute;left:5px;padding:0 4px 1px 0;line-height:17px;background:url(http://api.map.baidu.com/images/dis_box_01.gif) no-repeat right top", 281 BMapLib_disBoxDis: "color:#ff6319;font-weight:bold" 282 }; 283 if (this._opts.lineStroke <= 0) { 284 this._opts.lineStroke = 2 285 } 286 if (this._opts.opacity > 1) { 287 this._opts.opacity = 1 288 } else { 289 if (this._opts.opacity < 0) { 290 this._opts.opacity = 0 291 } 292 } 293 if (this._opts.lineStyle != "solid" && this._opts.lineStyle != "dashed") { 294 this._opts.lineStyle = "solid" 295 } 296 if (!this._units[this._opts.unit]) { 297 this._opts.unit = "metric" 298 } 299 this.text = "u6d4bu8ddd" 300 }; 301 c.lang.inherits(d, c.lang.Class, "DistanceTool"); 302 d.prototype._bind = function() { 303 this._setCursor(this._opts.cursor); 304 var f = this; 305 c.on(this._map.getContainer(), "mousemove", 306 function(i) { 307 if (!f._isOpen) { 308 return 309 } 310 if (!f._followTitle) { 311 return 312 } 313 i = window.event || i; 314 var g = i.target || i.srcElement; 315 if (g != a.getDom(f._map)) { 316 f._followTitle.hide(); 317 return 318 } 319 if (!f._mapMoving) { 320 f._followTitle.show() 321 } 322 var h = a.getDrawPoint(i, true); 323 f._followTitle.setPosition(h) 324 }); 325 if (this._startFollowText) { 326 var e = this._followTitle = new BMap.Label(this._startFollowText, { 327 offset: new BMap.Size(14, 16) 328 }); 329 this._followTitle.setStyles({ 330 color: "#333", 331 borderColor: "#ff0103" 332 }) 333 } 334 }; 335 d.prototype.open = function() { 336 if (this._isOpen == true) { 337 return true 338 } 339 if ( !! BMapLib._toolInUse) { 340 return 341 } 342 this._isOpen = true; 343 BMapLib._toolInUse = true; 344 if (this._mapMoving) { 345 delete this._mapMoving 346 } 347 var h = this; 348 if (!this._binded) { 349 this._binded = true; 350 this._bind(); 351 this._map.addEventListener("moving", 352 function() { 353 h._hideCurrent() 354 }) 355 } 356 if (this._followTitle) { 357 this._map.addOverlay(this._followTitle); 358 this._followTitle.hide() 359 } 360 var g = function(q) { 361 //TODO 362 var l = h._map;//获取map对象 363 if (!h._isOpen) {//判断测距工具是否打开，关闭则返回 364 return 365 } 366 q = window.event || q; 367 var n = a.getDrawPoint(q, true);//获取鼠标点击的点 368 if (!h._isPointValid(n)) {//判断点是否有效 369 return 370 } 371 h._bind.initX = q.pageX || q.clientX || 0;//绑定当前的坐标 372 h._bind.initY = q.pageY || q.clientY || 0; 373 if (h._points.length > 0) { 374 var t = l.pointToPixel(h._points[h._points.length - 1]);//获取点数组最后一个元素，转换为Pixel点 375 var m = l.pointToPixel(n);//将当前的点转换为Pixel点 376 var p = Math.sqrt(Math.pow(t.x - m.x, 2) + Math.pow(t.y - m.y, 2));//求两个点的距离 377 if (p < 5) {//距离小于5则返回 378 return 379 } 380 } 381 h._bind.x = q.layerX || q.offsetX || 0;//保存当前坐标 382 h._bind.y = q.layerY || q.offsetY || 0; 383 h._points.push(n);//将当前坐标存入数组 384 h._addSecPoint(n);//TODO 385 if (h._paths.length == 0) { 386 h._formatTitle(1, h._opts.followText, h._getTotalDistance()) 387 } 388 if (h._paths.length > 0) { 389 h._paths[h._paths.length - 1].show(); 390 h._paths[h._paths.length - 1].setStrokeOpacity(h._opts.opacity) 391 } 392 var w = new BMap.Polyline([n, n], { 393 enableMassClear: h._enableMassClear 394 }); 395 h._map.addOverlay(w); 396 h._paths.push(w); 397 h._overlays.push(w); 398 w.setStrokeWeight(h._opts.lineStroke); 399 w.setStrokeColor(h._opts.lineColor); 400 w.setStrokeOpacity(h._opts.opacity / 2); 401 w.setStrokeStyle(h._opts.lineStyle); 402 if (h._mapMoving) { 403 w.hide() 404 } 405 if (h._points.length > 1) { 406 var o = h._paths[h._points.length - 2]; 407 o.setPositionAt(1, n) 408 } 409 var r = ""; 410 var v; 411 if (h._points.length > 1) { 412 var u = h._setSegDistance(h._points[h._points.length - 2], h._points[h._points.length - 1]); 413 var s = h._getTotalDistance(); 414 r = h._formatDisStr(s); 415 v = new BMap.Label(r, { 416 offset: new BMap.Size(10, -5), 417 enableMassClear: h._enableMassClear 418 }); 419 } else { 420 r = "u8d77u70b9"; 421 v = new BMap.Label(r, { 422 offset: new BMap.Size(-10, -25), 423 enableMassClear: h._enableMassClear 424 }); 425 } 426 // var v = new BMap.Label(r, { 427 // offset: new BMap.Size(10, -5), 428 // enableMassClear: h._enableMassClear 429 // }); 430 v.setStyles({ 431 color: "#333", 432 borderColor: "#ff0103" 433 }); 434 h._map.addOverlay(v); 435 h._formatSegLabel(v, r); 436 h._overlays.push(v); 437 n.disLabel = v; 438 v.setPosition(n); 439 var k = new c.lang.Event("onaddpoint"); 440 k.point = n; 441 k.pixel = h._map.pointToPixel(n); 442 k.index = h._points.length - 1; 443 k.distance = h._getTotalDistance().toFixed(0); 444 h.dispatchEvent(k) 445 }; 446 var f = function(p) { 447 if (!h._isOpen) { 448 return 449 } 450 if (h._paths.length > 0) { 451 p = window.event || p; 452 var l = p.pageX || p.clientX || 0; 453 var k = p.pageY || p.clientY || 0; 454 if (typeof h._bind.initX == "undefined") { 455 h._bind.x = p.layerX || p.offsetX || 0; 456 h._bind.y = p.layerY || p.offsetY || 0; 457 h._bind.initX = l; 458 h._bind.initY = k 459 } 460 var r = h._bind.x + l - h._bind.initX; 461 var q = h._bind.y + k - h._bind.initY; 462 var z = h._paths[h._paths.length - 1]; 463 var m = h._map.pixelToPoint(new BMap.Pixel(r, q)); 464 z.setPositionAt(1, m); 465 if (!h._mapMoving) { 466 z.show() 467 } 468 var A = 0; 469 var u = 0; 470 if (r < 10) { 471 A = 8 472 } else { 473 if (r > h._map.getSize().width - 10) { 474 A = -8 475 } 476 } 477 if (q < 10) { 478 u = 8 479 } else { 480 if (q > h._map.getSize().height - 10) { 481 u = -8 482 } 483 } 484 if (A != 0 || u != 0) { 485 if (!f._movingTimerId) { 486 h._mapMoving = true; 487 h._map.panBy(A, u, { 488 noAnimation: true 489 }); 490 h._movingTimerId = f._movingTimerId = setInterval(function() { 491 h._map.panBy(A, u, { 492 noAnimation: true 493 }) 494 }, 495 30); 496 z.hide(); 497 h._followTitle && h._followTitle.hide() 498 } 499 } else { 500 if (f._movingTimerId) { 501 clearInterval(f._movingTimerId); 502 delete f._movingTimerId; 503 delete h._movingTimerId; 504 var w = h._paths[h._paths.length - 1]; 505 var v = h._map.pixelToPoint(new BMap.Pixel(r, q)); 506 if (!w) { 507 return 508 } 509 w.setPositionAt(1, v); 510 w.show(); 511 if (h._followTitle) { 512 h._followTitle.setPosition(v); 513 h._followTitle.show() 514 } 515 h._bind.i = 0; 516 h._bind.j = 0; 517 delete h._mapMoving 518 } 519 } 520 if (h._followTitle) { 521 var o = h._getTotalDistance(); 522 var n = h._map.getDistance(h._points[h._points.length - 1], m); 523 h._updateInstDis(h._followTitle, o + n) 524 } 525 } else { 526 if (h._followTitle) { 527 h._followTitle.show(); 528 p = window.event || p; 529 var s = p.target || p.srcElement; 530 if (s != a.getDom()) { 531 h._followTitle.hide() 532 } 533 } 534 } 535 }; 536 var e = function(k) { 537 if (!h._isOpen) { 538 return 539 } 540 c.un(a.getDom(h._map), "click", g); 541 c.un(document, "mousemove", f); 542 c.un(a.getDom(h._map), "dblclick", e); 543 c.un(document, "keydown", j); 544 c.un(a.getDom(h._map), "mouseup", i); 545 setTimeout(function() { 546 //1 547 h.close() 548 }, 549 50) 550 }; 551 var j = function(k) { 552 k = window.event || k; 553 if (k.keyCode == 27) { 554 h._clearCurData(); 555 setTimeout(function() { 556 //2 557 h.close() 558 }, 559 50) 560 } 561 }; 562 var i = function(k) { 563 k = window.event || k; 564 var l = 0; 565 if (/msie (d+.d)/i.test(navigator.userAgent)) { 566 l = document.documentMode || +RegExp["x241"] 567 } 568 if (l && k.button != 1 || k.button == 2) { 569 //3 570 h.close() 571 } 572 }; 573 h._initData(); 574 this._formatTitle(); 575 a.show(this._map); 576 this._setCursor(this._opts.cursor); 577 c.on(a.getDom(this._map), "click", g); 578 c.on(document, "mousemove", f); 579 c.on(a.getDom(this._map), "dblclick", e); 580 c.on(document, "keydown", j); 581 c.on(a.getDom(this._map), "mouseup", i); 582 this.bindFunc = [{ 583 elem: a.getDom(this._map), 584 type: "click", 585 func: g 586 }, 587 { 588 elem: a.getDom(this._map), 589 type: "dblclick", 590 func: e 591 }, 592 { 593 elem: document, 594 type: "mousemove", 595 func: f 596 }, 597 { 598 elem: document, 599 type: "keydown", 600 func: j 601 }, 602 { 603 elem: a.getDom(this._map), 604 type: "mouseup", 605 func: i 606 }]; 607 return true 608 }; 609 d.prototype._dispatchLastEvent = function() { 610 var e = new c.lang.Event("ondrawend"); 611 e.points = this._points ? this._points.slice(0) : []; 612 e.overlays = this._paths ? this._paths.slice(0, this._paths.length - 1) : []; 613 e.distance = this._getTotalDistance().toFixed(0); 614 this.dispatchEvent(e) 615 }; 616 d.prototype.close = function() { 617 if (this._isOpen == false) { 618 return 619 } 620 this._isOpen = false; 621 BMapLib._toolInUse = false; 622 if (this._mapMoving) { 623 delete this._mapMoving 624 } 625 var g = this; 626 g._dispatchLastEvent(); 627 if (g._points.length < 2) { 628 g._clearCurData() 629 } else { 630 g._paths[g._paths.length - 1].remove(); 631 g._paths[g._paths.length - 1] = null; 632 g._paths.length = g._paths.length - 1; 633 var h = g._points[g._points.length - 1]; 634 if (h.disLabel) { 635 h.disLabel.remove() 636 } 637 g._processLastOp() 638 } 639 a.hide(); 640 for (var f = 0, 641 e = this.bindFunc.length; f < e; f++) { 642 c.un(this.bindFunc[f].elem, this.bindFunc[f].type, this.bindFunc[f].func) 643 } 644 if (g._movingTimerId) { 645 clearInterval(g._movingTimerId); 646 g._movingTimerId = null 647 } 648 if (this._followTitle) { 649 this._followTitle.hide() 650 } 651 }; 652 d.prototype._clearCurData = function() { 653 for (var f = 0, 654 e = this._points.length; f < e; f++) { 655 if (this._points[f].disLabel) { 656 this._points[f].disLabel.remove() 657 } 658 } 659 for (var f = 0, 660 e = this._paths.length; f < e; f++) { 661 this._paths[f].remove() 662 } 663 for (var f = 0, 664 e = this._dots.length; f < e; f++) { 665 this._dots[f].remove() 666 } 667 this._initData() 668 }; 669 d.prototype._initData = function() { 670 this._points.length = 0; 671 this._paths.length = 0; 672 this._segDistance.length = 0; 673 this._dots.length = 0 674 }; 675 d.prototype._setSegDistance = function(g, f) { 676 if (!g || !f) { 677 return 678 } 679 var e = this._map.getDistance(g, f); 680 this._segDistance.push(e); 681 return e 682 }; 683 d.prototype._getTotalDistance = function() { 684 var g = 0; 685 for (var f = 0, 686 e = this._segDistance.length; f < e; f++) { 687 g += this._segDistance[f] 688 } 689 return g 690 }; 691 d.prototype._convertUnit = function(e, f) { 692 f = f || "metric"; 693 if (this._units[f]) { 694 return e * this._units[f].conv 695 } 696 return e 697 }; 698 d.prototype._addSecPoint = function(g) { 699 var f = this._opts.secIcon ? this._opts.secIcon: new BMap.Icon("http://api.map.baidu.com/images/mapctrls.png", new BMap.Size(11, 11), { 700 imageOffset: new BMap.Size( - 26, -313) 701 }); 702 var e = new BMap.Marker(g, { 703 icon: f, 704 clickable: false, 705 baseZIndex: 3500000, 706 zIndexFixed: true, 707 enableMassClear: this._enableMassClear 708 }); 709 this._map.addOverlay(e); 710 this._dots.push(e) 711 }; 712 d.prototype._formatDisStr = function(h) { 713 var f = this._opts.unit; 714 var g = this._units[f].u1; 715 var e = this._convertUnit(h, f); 716 if (e > this._units[f].incon) { 717 e = e / this._units[f].incon; 718 g = this._units[f].u2; 719 e = e.toFixed(1) 720 } else { 721 e = e.toFixed(0) 722 } 723 return e + g 724 }; 725 d.prototype._setCursor = function(f) { 726 var e = /webkit/.test(navigator.userAgent.toLowerCase()) ? "url(" + this._opts.cursor + ") 3 6, crosshair": "url(" + this._opts.cursor + "), crosshair"; 727 a._setCursor(e) 728 }; 729 d.prototype._getCursor = function() { 730 return this._opts.cursor 731 }; 732 d.prototype._formatSegLabel = function(e, f) { 733 e.setStyle({ 734 border: "none", 735 padding: "0" 736 }); 737 e.setContent("<span style=‘" + this._styles.BMapLib_diso + "‘><span style=‘" + this._styles.BMapLib_disi + "‘>" + f + "</span></span>") 738 }; 739 d.prototype._processLastOp = function() { 740 var i = this; 741 delete i._bind.x; 742 delete i._bind.y; 743 delete i._bind.initX; 744 delete i._bind.initY; 745 if (i._paths.length > i._points.length - 1) { 746 var g = i._paths.length - 1; 747 i._paths[g].remove(); 748 i._paths[g] = null; 749 i._paths.length = g 750 } 751 var e = {}; 752 e.points = i._points.slice(0); 753 e.paths = i._paths.slice(0); 754 e.dots = i._dots.slice(0); 755 e.segDis = i._segDistance.slice(0); 756 var j = i._map.pointToPixel(e.points[e.points.length - 1]); 757 var h = i._map.pointToPixel(e.points[e.points.length - 2]); 758 var k = [0, 0]; 759 var f = [0, 0]; 760 if (j.y - h.y >= 0) { 761 f = [ - 5, 11] 762 } else { 763 f = [ - 5, -35] 764 } 765 if (j.x - h.x >= 0) { 766 k = [14, 0] 767 } else { 768 k = [ - 14, 0] 769 } 770 var n = e.points[e.points.length - 1]; 771 n.disLabel = new BMap.Label("", { 772 offset: new BMap.Size( - 15, -40), 773 enableMassClear: i._enableMassClear 774 }); 775 n.disLabel.setStyles({ 776 color: "#333", 777 borderColor: "#ff0103" 778 }); 779 i._map.addOverlay(n.disLabel); 780 n.disLabel.setOffset(new BMap.Size(f[0], f[1])); 781 n.disLabel.setPosition(n); 782 i._formatTitle(2, "", "", n.disLabel); 783 var m = this._opts.closeIcon ? this._opts.closeIcon: new BMap.Icon("http://api.map.baidu.com/images/mapctrls.gif", new BMap.Size(12, 12), { 784 imageOffset: new BMap.Size(0, -14) 785 }); 786 e.closeBtn = new BMap.Marker(e.points[e.points.length - 1], { 787 icon: m, 788 offset: new BMap.Size(k[0], k[1]), 789 baseZIndex: 3600000, 790 enableMassClear: i._enableMassClear 791 }); 792 //将多边形绑定到关闭按钮上 793 var hh = this; 794 e.closeBtn._polygon = hh.polygon; 795 hh.polygon = undefined; 796 hh._areaPoints = undefined; 797 i._map.addOverlay(e.closeBtn); 798 //绑定添加焦点事件 799 e.closeBtn.setTitle("u6e05u9664u672cu6b21u6d4bu8ddd"); 800 e.closeBtn.addEventListener("click", 801 function(r) { 802 //TODO 803 var polygon = r.target._polygon; 804 if(polygon.label!=undefined){ 805 hh._map.removeOverlay(polygon.label); 806 } 807 hh._map.removeOverlay(polygon); 808 r.target._polygon =undefined; 809 810 for (var p = 0, 811 o = e.points.length; p < o; p++) { 812 e.points[p].disLabel.remove(); 813 e.points[p].disLabel = null 814 } 815 for (var p = 0, 816 o = e.paths.length; p < o; p++) { 817 e.paths[p].remove(); 818 e.paths[p] = null 819 } 820 for (var p = 0, 821 o = e.dots.length; p < o; p++) { 822 e.dots[p].remove(); 823 e.dots[p] = null 824 } 825 e.closeBtn.remove(); 826 e.closeBtn = null; 827 b(r); 828 var q = new c.lang.Event("onremovepolyline"); 829 i.dispatchEvent(q) 830 //todo 831 }); 832 i._initData() 833 }; 834 d.prototype._formatTitle = function(g, l, e, i) { 835 var h = i || this._followTitle; 836 if (!h) { 837 return 838 } 839 h.setStyle({ 840 lineHeight: "16px", 841 zIndex: "85", 842 padding: "3px 5px" 843 }); 844 var n = this._startFollowText || ""; 845 var k = []; 846 if (g == 1) { 847 h.setOffset(0, 25); 848 var m = this._opts.unit; 849 var j = this._units[m].u1; 850 var f = this._convertUnit(e, m); 851 if (f > this._units[m].incon) { 852 f = f / this._units[m].incon; 853 j = this._units[m].u2; 854 f = f.toFixed(1) 855 } else { 856 f = f.toFixed(0) 857 } 858 k.push("<span>u603bu957fuff1a<span style=‘" + this._styles.BMapLib_disBoxDis + "‘>" + f + "</span>" + j + "</span><br />"); 859 k.push("<span style=‘color:#7a7a7a‘>" + l + "</span>") 860 } else { 861 if (g == 2) { 862 var m = this._opts.unit; 863 var j = this._units[m].u1; 864 var f = this._convertUnit(this._getTotalDistance(), m); 865 if (f > this._units[m].incon) { 866 f = f / this._units[m].incon; 867 j = this._units[m].u2; 868 f = f.toFixed(1) 869 } else { 870 f = f.toFixed(0) 871 } 872 k.push("u603bu957fuff1a<span style=‘" + this._styles.BMapLib_disBoxDis + "‘>" + f + "</span>" + j) 873 } else { 874 h.setOffset(0, 25); 875 k.push(n) 876 } 877 } 878 h.setContent(k.join("")) 879 }; 880 d.prototype._updateInstDis = function(g, e) { 881 var f = this._opts.unit; 882 var i = this._units[f].u1; 883 if (e > this._units[f].incon) { 884 e = e / this._units[f].incon; 885 i = this._units[f].u2; 886 e = e.toFixed(1) 887 } else { 888 e = e.toFixed(0) 889 } 890 if (g) { 891 var h = []; 892 h.push("<span>u603bu957fuff1a<span style=‘" + this._styles.BMapLib_disBoxDis + "‘>" + e + "</span>" + i + "</span><br />"); 893 h.push("<span style=‘color:#7a7a7a‘>" + this._opts.followText + "</span>"); 894 g.setContent(h.join("")) 895 } 896 }; 897 d.prototype._hideCurrent = function() { 898 if (!this._isOpen) { 899 return 900 } 901 if (this._paths.length > 0) { 902 var e = this._paths[this._paths.length - 1]; 903 e.hide() 904 } 905 this._followTitle && this._followTitle.hide() 906 }; 907 d.prototype._isPointValid = function(h) { 908 if (!h) { 909 return false 910 } 911 var f = this._map.getBounds(); 912 var e = f.getSouthWest(), 913 g = f.getNorthEast(); 914 if (h.lng < e.lng || h.lng > g.lng || h.lat < e.lat || h.lat > g.lat) { 915 return false 916 } 917 return true 918 }; 919 var a = { 920 _map: null, 921 _html: "<div style=‘background:transparent url(http://api.map.baidu.com/images/blank.gif);position:absolute;left:0;top:0;width:100%;height:100%;z-index:1000‘ unselectable=‘on‘></div>", 922 _maskElement: null, 923 _cursor: "default", 924 _inUse: false, 925 show: function(e) { 926 if (!this._map) { 927 this._map = e 928 } 929 this._inUse = true; 930 if (!this._maskElement) { 931 this._createMask(e) 932 } 933 this._maskElement.style.display = "block" 934 }, 935 _createMask: function(g) { 936 this._map = g; 937 if (!this._map) { 938 return 939 } 940 c.insertHTML(this._map.getContainer(), "beforeEnd", this._html); 941 var f = this._maskElement = this._map.getContainer().lastChild; 942 var e = function(h) { 943 b(h); 944 return c.preventDefault(h) 945 }; 946 c.on(f, "mouseup", 947 function(h) { 948 if (h.button == 2) { 949 e(h) 950 } 951 }); 952 c.on(f, "contextmenu", e); 953 f.style.display = "none" 954 }, 955 getDrawPoint: function(h, j) { 956 h = window.event || h; 957 var f = h.layerX || h.offsetX || 0; 958 var i = h.layerY || h.offsetY || 0; 959 var g = h.target || h.srcElement; 960 if (g != a.getDom(this._map) && j == true) { 961 while (g && g != this._map.getContainer()) { 962 if (! (g.clientWidth == 0 && g.clientHeight == 0 && g.offsetParent && g.offsetParent.nodeName.toLowerCase() == "td")) { 963 f += g.offsetLeft; 964 i += g.offsetTop 965 } 966 g = g.offsetParent 967 } 968 } 969 if (g != a.getDom(this._map) && g != this._map.getContainer()) { 970 return 971 } 972 if (typeof f === "undefined" || typeof i === "undefined") { 973 return 974 } 975 if (isNaN(f) || isNaN(i)) { 976 return 977 } 978 return this._map.pixelToPoint(new BMap.Pixel(f, i)) 979 }, 980 hide: function() { 981 if (!this._map) { 982 return 983 } 984 this._inUse = false; 985 if (this._maskElement) { 986 this._maskElement.style.display = "none" 987 } 988 }, 989 getDom: function(e) { 990 if (!this._maskElement) { 991 this._createMask(e) 992 } 993 return this._maskElement 994 }, 995 _setCursor: function(e) { 996 this._cursor = e || "default"; 997 if (this._maskElement) { 998 this._maskElement.style.cursor = this._cursor 999 } 1000 } 1001 }; 1002 function b(f) { 1003 var f = window.event || f; 1004 f.stopPropagation ? f.stopPropagation() : f.cancelBubble = true 1005 } 1006 })(); 1007 1008 var _polygonStyleOptions = { 1009 strokeColor:"blue", //边线颜色。 1010 fillColor:"#FFCCFF", //填充颜色。当参数为空时，圆形将没有填充效果。 1011 strokeWeight: 0.00001, //边线的宽度，以像素为单位。 1012 strokeOpacity: 0, //边线透明度，取值范围0 - 1。 1013 fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。 1014 strokeStyle: ‘solid‘ //边线的样式，solid或dashed。 1015 } 1016 var _LabelOptions = { 1017 color : "black", 1018 fontSize : "16px", 1019 fillColor:"red" //填充颜色。当参数为空时，圆形将没有填充效果。 1020 } 1021 1022 //自定义测量面积工具 1023 var createMeasureAreaTool =function(map){ 1024 var myDis = new BMapLib.MeasureAreaTool(map); //测距插件 1025 1026 myDis.addEventListener("addpoint", function(e) { 1027 var _map = e.target._map; 1028 if(e.target._areaPoints == undefined){ 1029 e.target._areaPoints = new Array(); 1030 } 1031 e.target._areaPoints.push(e.point); 1032 if(e.target.polygon == undefined){ 1033 var polygon = new BMap.Polygon(e.target._areaPoints,_polygonStyleOptions); 1034 myDis.polygon = polygon; 1035 _map.addOverlay(polygon); 1036 }else{ 1037 var polygon = e.target.polygon; 1038 polygon.setPath(e.target._areaPoints); 1039 //计算多边形的面积 1040 var _area = 0; 1041 _area = BMapLib.GeoUtils.getPolygonArea(polygon); 1042 //保留两位小数 1043 _area = _area.toFixed(2); 1044 //获取多边形的中心 1045 var _paths = polygon.getPath(); 1046 var point = getCenterPoint(_paths); 1047 //移除polygon之前的label 1048 if(polygon.label!=undefined){ 1049 var l = polygon.label; 1050 _map.removeOverlay(l); 1051 polygon.label = undefined; 1052 } 1053 //往多边形添加标注 1054 var label = new BMap.Label("区域面积："+_area+"m3",_LabelOptions); 1055 polygon.label =label; 1056 label.setPosition(point); 1057 //往地图上添加标注 1058 _map.addOverlay(label); 1059 } 1060 }); 1061 return myDis; 1062 }
2.3 GeoUtils.js 这个是计算面积的api,这个也是必须的。下载链接：http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html
好了，现在可以测试效果了，浏览器打开measureAreaTool_baidu.html这个页面，点击面积测量就可以看到效果。
代码下载地址：https://download.csdn.net/download/hgq0916/10579481
————————————————
版权声明：本文为CSDN博主「奔腾的野马」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hgq0916/article/details/78991927
以上是关于百度地图实现测量面积和测量距离功能的主要内容，如果未能解决你的问题，请参考以下文章
ArcGisJS实现地图常用工具条距离测量和面积测量（非官方实例）
ArcGIS微课1000例0017：ArcGIS测量距离和面积工具的巧妙使用