百度API實現地圖示點並測距
阿新 • • 發佈：2019-01-23
##index.html
<!doctype html> <html> <head> <title>地圖示點</title> <meta http-equiv="content-type" content="text/html;charset=utf-8;"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var city = '北京'; var pointsInfo = []; pointsInfo[0] = []; pointsInfo[0]['lng'] = 116.397575; pointsInfo[0]['lat'] = 39.905560; pointsInfo[1] = []; pointsInfo[1]['lng'] = 116.398499; pointsInfo[1]['lat'] = 39.905590; pointsInfo[2] = []; pointsInfo[2]['lng'] = 116.399071; pointsInfo[2]['lat'] = 39.905605; pointsInfo[3] = []; pointsInfo[3]['lng'] = 116.399551; pointsInfo[3]['lat'] = 39.905628; pointsInfo[4] = []; pointsInfo[4]['lng'] = 116.400024; pointsInfo[4]['lat'] = 39.905636; pointsInfo[5] = []; pointsInfo[5]['lng'] = 116.400436; pointsInfo[5]['lat'] = 39.905647; pointsInfo[6] = []; pointsInfo[6]['lng'] = 116.394737; pointsInfo[6]['lat'] = 39.905449; pointsInfo[7] = []; pointsInfo[7]['lng'] = 116.395164; pointsInfo[7]['lat'] = 39.905460; pointsInfo[8] = []; pointsInfo[8]['lng'] = 116.395744; pointsInfo[8]['lat'] = 39.905479; pointsInfo[9] = []; pointsInfo[9]['lng'] = 116.396172; pointsInfo[9]['lat'] = 39.905510; pointsInfo[10] = []; pointsInfo[10]['lng'] = 116.396767; pointsInfo[10]['lat'] = 39.905521; pointsInfo[11] = []; pointsInfo[11]['lng'] = 116.397209; pointsInfo[11]['lat'] = 39.905548; pointsInfo[12] = []; pointsInfo[12]['lng'] = 116.398079; pointsInfo[12]['lat'] = 39.905575; pointsInfo[13] = []; pointsInfo[13]['lng'] = 116.400864; pointsInfo[13]['lat'] = 39.905670; pointsInfo[14] = []; pointsInfo[14]['lng'] = 116.401657; pointsInfo[14]['lat'] = 39.905689; pointsInfo[15] = []; pointsInfo[15]['lng'] = 116.402344; pointsInfo[15]['lat'] = 39.905716; pointsInfo[16] = []; pointsInfo[16]['lng'] = 116.402756; pointsInfo[16]['lat'] = 39.905716; pointsInfo[17] = []; pointsInfo[17]['lng'] = 116.403244; pointsInfo[17]['lat'] = 39.905735; pointsInfo[18] = []; pointsInfo[18]['lng'] = 116.403587; pointsInfo[18]['lat'] = 39.905716; pointsInfo[19] = []; pointsInfo[19]['lng'] = 116.414124; pointsInfo[19]['lat'] = 39.907169; pointsInfo[20] = []; pointsInfo[20]['lng'] = 116.417358; pointsInfo[20]['lat'] = 39.908512; pointsInfo[21] = []; pointsInfo[21]['lng'] = 116.418022; pointsInfo[21]['lat'] = 39.909924; pointsInfo[22] = []; pointsInfo[22]['lng'] = 116.417953; pointsInfo[22]['lat'] = 39.910877; pointsInfo[23] = []; pointsInfo[23]['lng'] = 116.417931; pointsInfo[23]['lat'] = 39.912041; pointsInfo[24] = []; pointsInfo[24]['lng'] = 116.415863; pointsInfo[24]['lat'] = 39.906723; pointsInfo[25] = []; pointsInfo[25]['lng'] = 116.416367; pointsInfo[25]['lat'] = 39.906731; pointsInfo[26] = []; pointsInfo[26]['lng'] = 116.416740; pointsInfo[26]['lat'] = 39.906742; pointsInfo[27] = []; pointsInfo[27]['lng'] = 116.417213; pointsInfo[27]['lat'] = 39.906750; pointsInfo[28] = []; pointsInfo[28]['lng'] = 116.390678; pointsInfo[28]['lat'] = 39.905334; pointsInfo[29] = []; pointsInfo[29]['lng'] = 116.391197; pointsInfo[29]['lat'] = 39.905346; pointsInfo[30] = []; pointsInfo[30]['lng'] = 116.391563; pointsInfo[30]['lat'] = 39.905357; pointsInfo[31] = []; pointsInfo[31]['lng'] = 116.391953; pointsInfo[31]['lat'] = 39.905373; pointsInfo[32] = []; pointsInfo[32]['lng'] = 116.392303; pointsInfo[32]['lat'] = 39.905392; pointsInfo[33] = []; pointsInfo[33]['lng'] = 116.392685; pointsInfo[33]['lat'] = 39.905399; pointsInfo[34] = []; pointsInfo[34]['lng'] = 116.393074; pointsInfo[34]['lat'] = 39.905403; pointsInfo[35] = []; pointsInfo[35]['lng'] = 116.393349; pointsInfo[35]['lat'] = 39.905411; pointsInfo[36] = []; pointsInfo[36]['lng'] = 116.393578; pointsInfo[36]['lat'] = 39.905411; pointsInfo[37] = []; pointsInfo[37]['lng'] = 116.393867; pointsInfo[37]['lat'] = 39.905422; pointsInfo[38] = []; pointsInfo[38]['lng'] = 116.389191; pointsInfo[38]['lat'] = 39.905296; pointsInfo[39] = []; pointsInfo[39]['lng'] = 116.389648; pointsInfo[39]['lat'] = 39.905312; pointsInfo[40] = []; pointsInfo[40]['lng'] = 116.389961; pointsInfo[40]['lat'] = 39.905319; pointsInfo[41] = []; pointsInfo[41]['lng'] = 116.390327; pointsInfo[41]['lat'] = 39.905331; pointsInfo[42] = []; pointsInfo[42]['lng'] = 116.394127; pointsInfo[42]['lat'] = 39.905430; pointsInfo[43] = []; pointsInfo[43]['lng'] = 116.394394; pointsInfo[43]['lat'] = 39.905441; pointsInfo[44] = []; pointsInfo[44]['lng'] = 116.394920; pointsInfo[44]['lat'] = 39.905453; pointsInfo[45] = []; pointsInfo[45]['lng'] = 116.395355; pointsInfo[45]['lat'] = 39.905472; pointsInfo[46] = []; pointsInfo[46]['lng'] = 116.386963; pointsInfo[46]['lat'] = 39.905235; pointsInfo[47] = []; pointsInfo[47]['lng'] = 116.387558; pointsInfo[47]['lat'] = 39.905247; pointsInfo[48] = []; pointsInfo[48]['lng'] = 116.416344; pointsInfo[48]['lat'] = 39.906933; pointsInfo[49] = []; pointsInfo[49]['lng'] = 116.416748; pointsInfo[49]['lat'] = 39.906937; pointsInfo[50] = []; pointsInfo[50]['lng'] = 116.550919; pointsInfo[50]['lat'] = 39.908463; pointsInfo[51] = []; pointsInfo[51]['lng'] = 116.551514; pointsInfo[51]['lat'] = 39.908459; pointsInfo[52] = []; pointsInfo[52]['lng'] = 116.552101; pointsInfo[52]['lat'] = 39.908455; pointsInfo[53] = []; pointsInfo[53]['lng'] = 116.552681; pointsInfo[53]['lat'] = 39.908394; pointsInfo[54] = []; pointsInfo[54]['lng'] = 116.401138; pointsInfo[54]['lat'] = 39.905666; pointsInfo[55] = []; pointsInfo[55]['lng'] = 116.401253; pointsInfo[55]['lat'] = 39.905567; pointsInfo[56] = []; pointsInfo[56]['lng'] = 116.401459; pointsInfo[56]['lat'] = 39.905769; pointsInfo[57] = []; pointsInfo[57]['lng'] = 116.401642; pointsInfo[57]['lat'] = 39.905590; pointsInfo[58] = []; pointsInfo[58]['lng'] = 116.401230; pointsInfo[58]['lat'] = 39.905800; pointsInfo[59] = []; pointsInfo[59]['lng'] = 116.243530; pointsInfo[59]['lat'] = 39.902142; pointsInfo[60] = []; pointsInfo[60]['lng'] = 116.244118; pointsInfo[60]['lat'] = 39.902164; pointsInfo[61] = []; pointsInfo[61]['lng'] = 116.244698; pointsInfo[61]['lat'] = 39.902187; pointsInfo[62] = []; pointsInfo[62]['lng'] = 116.245285; pointsInfo[62]['lat'] = 39.902191; pointsInfo[63] = []; pointsInfo[63]['lng'] = 116.245872; pointsInfo[63]['lat'] = 39.902203; pointsInfo[64] = []; pointsInfo[64]['lng'] = 116.246460; pointsInfo[64]['lat'] = 39.902206; pointsInfo[65] = []; pointsInfo[65]['lng'] = 116.247047; pointsInfo[65]['lat'] = 39.902233; pointsInfo[66] = []; pointsInfo[66]['lng'] = 116.247627; pointsInfo[66]['lat'] = 39.902225; pointsInfo[67] = []; pointsInfo[67]['lng'] = 116.248215; pointsInfo[67]['lat'] = 39.902245; pointsInfo[68] = []; pointsInfo[68]['lng'] = 116.248802; pointsInfo[68]['lat'] = 39.902245; pointsInfo[69] = []; pointsInfo[69]['lng'] = 116.249382; pointsInfo[69]['lat'] = 39.902256; pointsInfo[70] = []; pointsInfo[70]['lng'] = 116.249977; pointsInfo[70]['lat'] = 39.902264; pointsInfo[71] = []; pointsInfo[71]['lng'] = 116.250565; pointsInfo[71]['lat'] = 39.902294; pointsInfo[72] = []; pointsInfo[72]['lng'] = 116.251144; pointsInfo[72]['lat'] = 39.902287; pointsInfo[73] = []; pointsInfo[73]['lng'] = 116.251732; pointsInfo[73]['lat'] = 39.902287; pointsInfo[74] = []; pointsInfo[74]['lng'] = 116.252319; pointsInfo[74]['lat'] = 39.902290; pointsInfo[75] = []; pointsInfo[75]['lng'] = 116.252907; pointsInfo[75]['lat'] = 39.902313; pointsInfo[76] = []; pointsInfo[76]['lng'] = 116.253494; pointsInfo[76]['lat'] = 39.902313; pointsInfo[77] = []; pointsInfo[77]['lng'] = 116.254082; pointsInfo[77]['lat'] = 39.902325; pointsInfo[78] = []; pointsInfo[78]['lng'] = 116.254662; pointsInfo[78]['lat'] = 39.902325; pointsInfo[79] = []; pointsInfo[79]['lng'] = 116.255241; pointsInfo[79]['lat'] = 39.902348; pointsInfo[80] = []; pointsInfo[80]['lng'] = 116.255836; pointsInfo[80]['lat'] = 39.902359; pointsInfo[81] = []; pointsInfo[81]['lng'] = 116.256538; pointsInfo[81]['lat'] = 39.902370; pointsInfo[82] = []; pointsInfo[82]['lng'] = 116.257004; pointsInfo[82]['lat'] = 39.902382; pointsInfo[83] = []; pointsInfo[83]['lng'] = 116.257591; pointsInfo[83]['lat'] = 39.902374; pointsInfo[84] = []; pointsInfo[84]['lng'] = 116.243523; pointsInfo[84]['lat'] = 39.901810; pointsInfo[85] = []; pointsInfo[85]['lng'] = 116.244118; pointsInfo[85]['lat'] = 39.901821; pointsInfo[86] = []; pointsInfo[86]['lng'] = 116.244698; pointsInfo[86]['lat'] = 39.901836; pointsInfo[87] = []; pointsInfo[87]['lng'] = 116.245277; pointsInfo[87]['lat'] = 39.901848; pointsInfo[88] = []; pointsInfo[88]['lng'] = 116.245872; pointsInfo[88]['lat'] = 39.901852; pointsInfo[89] = []; pointsInfo[89]['lng'] = 116.247192; pointsInfo[89]['lat'] = 39.901840; pointsInfo[90] = []; pointsInfo[90]['lng'] = 116.248459; pointsInfo[90]['lat'] = 39.901840; pointsInfo[91] = []; pointsInfo[91]['lng'] = 116.250031; pointsInfo[91]['lat'] = 39.901878; pointsInfo[92] = []; pointsInfo[92]['lng'] = 116.250816; pointsInfo[92]['lat'] = 39.901909; pointsInfo[93] = []; pointsInfo[93]['lng'] = 116.252815; pointsInfo[93]['lat'] = 39.901958; pointsInfo[94] = []; pointsInfo[94]['lng'] = 116.254097; pointsInfo[94]['lat'] = 39.901993; pointsInfo[95] = []; pointsInfo[95]['lng'] = 116.255447; pointsInfo[95]['lat'] = 39.902004; pointsInfo[96] = []; pointsInfo[96]['lng'] = 116.256081; pointsInfo[96]['lat'] = 39.902023; pointsInfo[97] = []; pointsInfo[97]['lng'] = 116.257133; pointsInfo[97]['lat'] = 39.902035; pointsInfo[98] = []; pointsInfo[98]['lng'] = 116.397240; pointsInfo[98]['lat'] = 39.908787; pointsInfo[99] = []; pointsInfo[99]['lng'] = 116.397491; pointsInfo[99]['lat'] = 39.908634; pointsInfo[100] = []; pointsInfo[100]['lng'] = 116.398102; pointsInfo[100]['lat'] = 39.908703; pointsInfo[101] = []; pointsInfo[101]['lng'] = 116.398849; pointsInfo[101]['lat'] = 39.908779; pointsInfo[102] = []; pointsInfo[102]['lng'] = 116.399025; pointsInfo[102]['lat'] = 39.908722; pointsInfo[103] = []; pointsInfo[103]['lng'] = 116.399101; pointsInfo[103]['lat'] = 39.908779; pointsInfo[104] = []; pointsInfo[104]['lng'] = 116.405487; pointsInfo[104]['lat'] = 39.906487; pointsInfo[105] = []; pointsInfo[105]['lng'] = 116.406090; pointsInfo[105]['lat'] = 39.906601; pointsInfo[106] = []; pointsInfo[106]['lng'] = 116.406677; pointsInfo[106]['lat'] = 39.906685; pointsInfo[107] = []; pointsInfo[107]['lng'] = 116.407333; pointsInfo[107]['lat'] = 39.906887; pointsInfo[108] = []; pointsInfo[108]['lng'] = 116.407814; pointsInfo[108]['lat'] = 39.907192; pointsInfo[109] = []; pointsInfo[109]['lng'] = 116.407516; pointsInfo[109]['lat'] = 39.908092; pointsInfo[110] = []; pointsInfo[110]['lng'] = 116.407516; pointsInfo[110]['lat'] = 39.908287; pointsInfo[111] = []; pointsInfo[111]['lng'] = 116.394859; pointsInfo[111]['lat'] = 39.909000; pointsInfo[112] = []; pointsInfo[112]['lng'] = 116.394928; pointsInfo[112]['lat'] = 39.908985; pointsInfo[113] = []; pointsInfo[113]['lng'] = 116.400238; pointsInfo[113]['lat'] = 39.916042; pointsInfo[114] = []; pointsInfo[114]['lng'] = 116.403831; pointsInfo[114]['lat'] = 39.916374; pointsInfo[115] = []; pointsInfo[115]['lng'] = 116.397438; pointsInfo[115]['lat'] = 39.908833; pointsInfo[116] = []; pointsInfo[116]['lng'] = 116.396118; pointsInfo[116]['lat'] = 39.908630; pointsInfo[117] = []; pointsInfo[117]['lng'] = 116.396729; pointsInfo[117]['lat'] = 39.908607; pointsInfo[118] = []; pointsInfo[118]['lng'] = 116.397324; pointsInfo[118]['lat'] = 39.908607; pointsInfo[119] = []; pointsInfo[119]['lng'] = 116.397881; pointsInfo[119]['lat'] = 39.908615; pointsInfo[120] = []; pointsInfo[120]['lng'] = 116.398438; pointsInfo[120]['lat'] = 39.908657; pointsInfo[121] = []; pointsInfo[121]['lng'] = 116.398827; pointsInfo[121]['lat'] = 39.908669; pointsInfo[122] = []; pointsInfo[122]['lng'] = 116.395889; pointsInfo[122]['lat'] = 39.908607; pointsInfo[123] = []; pointsInfo[123]['lng'] = 116.396492; pointsInfo[123]['lat'] = 39.908604; pointsInfo[124] = []; pointsInfo[124]['lng'] = 116.397079; pointsInfo[124]['lat'] = 39.908611; pointsInfo[125] = []; pointsInfo[125]['lng'] = 116.397652; pointsInfo[125]['lat'] = 39.908623; pointsInfo[126] = []; pointsInfo[126]['lng'] = 116.398239; pointsInfo[126]['lat'] = 39.908653; pointsInfo[127] = []; pointsInfo[127]['lng'] = 116.404930; pointsInfo[127]['lat'] = 39.905735; pointsInfo[128] = []; pointsInfo[128]['lng'] = 116.405518; pointsInfo[128]['lat'] = 39.905773; pointsInfo[129] = []; pointsInfo[129]['lng'] = 116.405502; pointsInfo[129]['lat'] = 39.905792; pointsInfo[130] = []; pointsInfo[130]['lng'] = 116.397079; pointsInfo[130]['lat'] = 39.908115; pointsInfo[131] = []; pointsInfo[131]['lng'] = 116.396339; pointsInfo[131]['lat'] = 39.908222; pointsInfo[132] = []; pointsInfo[132]['lng'] = 116.397667; pointsInfo[132]['lat'] = 39.908226; pointsInfo[133] = []; pointsInfo[133]['lng'] = 116.398628; pointsInfo[133]['lat'] = 39.908226; pointsInfo[134] = []; pointsInfo[134]['lng'] = 116.399429; pointsInfo[134]['lat'] = 39.908314; pointsInfo[135] = []; pointsInfo[135]['lng'] = 116.399612; pointsInfo[135]['lat'] = 39.908131; pointsInfo[136] = []; pointsInfo[136]['lng'] = 116.397980; pointsInfo[136]['lat'] = 39.907959; pointsInfo[137] = []; pointsInfo[137]['lng'] = 116.396843; pointsInfo[137]['lat'] = 39.907906; pointsInfo[138] = []; pointsInfo[138]['lng'] = 116.395500; pointsInfo[138]['lat'] = 39.908127; pointsInfo[139] = []; pointsInfo[139]['lng'] = 116.358414; pointsInfo[139]['lat'] = 39.902790; pointsInfo[140] = []; pointsInfo[140]['lng'] = 116.359016; pointsInfo[140]['lat'] = 39.902824; pointsInfo[141] = []; pointsInfo[141]['lng'] = 116.359627; pointsInfo[141]['lat'] = 39.902874; pointsInfo[142] = []; pointsInfo[142]['lng'] = 116.360168; pointsInfo[142]['lat'] = 39.902916; pointsInfo[143] = []; pointsInfo[143]['lng'] = 116.360748; pointsInfo[143]['lat'] = 39.902950; pointsInfo[144] = []; pointsInfo[144]['lng'] = 116.361351; pointsInfo[144]['lat'] = 39.903019; pointsInfo[145] = []; pointsInfo[145]['lng'] = 116.361893; pointsInfo[145]['lat'] = 39.903061; pointsInfo[146] = []; pointsInfo[146]['lng'] = 116.398476; pointsInfo[146]['lat'] = 39.907776; pointsInfo[147] = []; pointsInfo[147]['lng'] = 116.399361; pointsInfo[147]['lat'] = 39.907726; pointsInfo[148] = []; pointsInfo[148]['lng'] = 116.400055; pointsInfo[148]['lat'] = 39.907803; pointsInfo[149] = []; pointsInfo[149]['lng'] = 116.398415; pointsInfo[149]['lat'] = 39.907104; pointsInfo[150] = []; pointsInfo[150]['lng'] = 116.399216; pointsInfo[150]['lat'] = 39.907146; pointsInfo[151] = []; pointsInfo[151]['lng'] = 116.400200; pointsInfo[151]['lat'] = 39.907185; pointsInfo[152] = []; pointsInfo[152]['lng'] = 116.401215; pointsInfo[152]['lat'] = 39.907234; pointsInfo[153] = []; pointsInfo[153]['lng'] = 116.395119; pointsInfo[153]['lat'] = 39.907635; pointsInfo[154] = []; pointsInfo[154]['lng'] = 116.395737; pointsInfo[154]['lat'] = 39.907623; pointsInfo[155] = []; pointsInfo[155]['lng'] = 116.396225; pointsInfo[155]['lat'] = 39.907623; pointsInfo[156] = []; pointsInfo[156]['lng'] = 116.394592; pointsInfo[156]['lat'] = 39.908001; pointsInfo[157] = []; pointsInfo[157]['lng'] = 116.395020; pointsInfo[157]['lat'] = 39.908009; pointsInfo[158] = []; pointsInfo[158]['lng'] = 116.395317; pointsInfo[158]['lat'] = 39.908009; pointsInfo[159] = []; pointsInfo[159]['lng'] = 116.399864; pointsInfo[159]['lat'] = 39.908566; pointsInfo[160] = []; pointsInfo[160]['lng'] = 116.400299; pointsInfo[160]['lat'] = 39.908524; pointsInfo[161] = []; pointsInfo[161]['lng'] = 116.400581; pointsInfo[161]['lat'] = 39.908550; pointsInfo[162] = []; pointsInfo[162]['lng'] = 116.400711; pointsInfo[162]['lat'] = 39.908302; pointsInfo[163] = []; pointsInfo[163]['lng'] = 116.400421; pointsInfo[163]['lat'] = 39.908142; pointsInfo[164] = []; pointsInfo[164]['lng'] = 116.400093; pointsInfo[164]['lat'] = 39.908344; pointsInfo[165] = []; pointsInfo[165]['lng'] = 116.398384; pointsInfo[165]['lat'] = 39.906963; pointsInfo[166] = []; pointsInfo[166]['lng'] = 116.399223; pointsInfo[166]['lat'] = 39.907017; pointsInfo[167] = []; pointsInfo[167]['lng'] = 116.400108; pointsInfo[167]['lat'] = 39.907078; pointsInfo[168] = []; pointsInfo[168]['lng'] = 116.401115; pointsInfo[168]['lat'] = 39.907131; </script> <style> .m-tit{font-size: 22px;color: #333333;} .w110 {width: 110px;} .l-btn { line-height: 36px; cursor: pointer; border-radius: 4px; color: #ffffff; font-family: microsoft yahei; font-size: 12px; width: 91px; height: 36px; border: none; background: #3cc; } .one-level{margin-bottom: 20px;border-bottom:1px solid #ddd;height: 68px;line-height: 68px;} .mapc-input{ position: absolute; top: 200px; right: 100px; width: 260px; height:auto; border: 1px solid #ccc; padding:5px; background-color: #fff;} .mapc-input input[type=text]{ display: block; margin-left: 20px; width: 148px; height: 26px; border: 1px solid #ccc;float: left;} .mapc-btn{ display: block; margin-left:15px; width: 58px; height: 30px; line-height: 30px; font-size: 13px; text-align: center; float:left;cursor:pointer;} </style> <body> <div class="one-level"> <span class="m-tit">地圖示點</span> </div> <table width="94%" height="40" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:20px;"> <tr style="border-bottom:2px solid #990000;"> <div style="width:94%;margin-left:3%;"> <button class="l-btn w110 fr" style="float:right;margin-right:20px;" onclick="startPunc(this)">開始標點</button> <button class="l-btn w110 fr" style="float:right;margin-right:20px;display: none;" onclick="savePoints(this)">確認提交</button> </div> </tr> </table> <div style="width: 94%;margin:10px auto;padding:2px;border:1px solid #ccc;" id="map"> <div id="map_canvas" style="width: 100%; height: 400px"></div> <div class="mapc-input" style="z-index:100000;"> <input type="text" id="keyword" value=""> <button class="mapc-btn" onclick="searchLocation();">定位</button> </div> </div> <table id="Legend" width="150" border="0" cellspacing="0" cellpadding="4" style="position: absolute; z-index: 1; border: 1px solid rgb(102, 102, 102); background-color: rgb(255, 255, 255); top: 534px; left: 747.5px;"> <tr> <td align="center">圖例: <font color="#FF0033" face="Arial black">◆</font>標點位置 </td> </tr> </table> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=OGTxxxxxxx9mek"></script> <script type="text/javascript" src="./js/Baidu_DistanceTool_1.2.js"></script> <script type="text/javascript" src="./js/index.js"></script> </body> </html>
##Baidu_DistanceTool_1.2.js
/**
* @fileoverview 百度地圖的測距工具類，對外開放。
* 允許使用者在地圖上點選完成距離的測量。
* 使用者可以自定義測距線段的相關樣式，例如線寬、顏色、測距結果所用的單位制等等。
* 主入口類是<a href="symbols/BMapLib.DistanceTool.html">DistanceTool</a>，
* 基於Baidu Map API 1.2。
*
* @author Baidu Map Api Group
* @version 1.2
*/
/**
* @namespace BMap的所有library類均放在BMapLib名稱空間下
*/
var BMapLib = window.BMapLib = BMapLib || {};
(function() {
/**
* 宣告baidu包
*/
var baidu = baidu || {guid : "$BAIDU$"};
(function() {
// 一些頁面級別唯一的屬性，需要掛載在window[baidu.guid]上
window[baidu.guid] = {};
/**
* 將源物件的所有屬性拷貝到目標物件中
* @name baidu.extend
* @function
* @grammar baidu.extend(target, source)
* @param {Object} target 目標物件
* @param {Object} source 源物件
* @returns {Object} 目標物件
*/
baidu.extend = function (target, source) {
for (var p in source) {
if (source.hasOwnProperty(p)) {
target[p] = source[p];
}
}
return target;
};
/**
* @ignore
* @namespace
* @baidu.lang 對語言層面的封裝，包括型別判斷、模組擴充套件、繼承基類以及物件自定義事件的支援。
* @property guid 物件的唯一標識
*/
baidu.lang = baidu.lang || {};
/**
* 返回一個當前頁面的唯一標識字串。
* @function
* @grammar baidu.lang.guid()
* @returns {String} 當前頁面的唯一標識字串
*/
baidu.lang.guid = function() {
return "TANGRAM__" + (window[baidu.guid]._counter ++).toString(36);
};
window[baidu.guid]._counter = window[baidu.guid]._counter || 1;
/**
* 所有類的例項的容器
* key為每個例項的guid
*/
window[baidu.guid]._instances = window[baidu.guid]._instances || {};
/**
* Tangram繼承機制提供的一個基類，使用者可以通過繼承baidu.lang.Class來獲取它的屬性及方法。
* @function
* @name baidu.lang.Class
* @grammar baidu.lang.Class(guid)
* @param {string} guid 物件的唯一標識
* @meta standard
* @remark baidu.lang.Class和它的子類的例項均包含一個全域性唯一的標識guid。
* guid是在建構函式中生成的，因此，繼承自baidu.lang.Class的類應該直接或者間接呼叫它的建構函式。<br>
* baidu.lang.Class的建構函式中產生guid的方式可以保證guid的唯一性，及每個例項都有一個全域性唯一的guid。
*/
baidu.lang.Class = function(guid) {
this.guid = guid || baidu.lang.guid();
window[baidu.guid]._instances[this.guid] = this;
};
window[baidu.guid]._instances = window[baidu.guid]._instances || {};
/**
* 判斷目標引數是否string型別或String物件
* @name baidu.lang.isString
* @function
* @grammar baidu.lang.isString(source)
* @param {Any} source 目標引數
* @shortcut isString
* @meta standard
*
* @returns {boolean} 型別判斷結果
*/
baidu.lang.isString = function (source) {
return '[object String]' == Object.prototype.toString.call(source);
};
/**
* 判斷目標引數是否為function或Function例項
* @name baidu.lang.isFunction
* @function
* @grammar baidu.lang.isFunction(source)
* @param {Any} source 目標引數
* @returns {boolean} 型別判斷結果
*/
baidu.lang.isFunction = function (source) {
return '[object Function]' == Object.prototype.toString.call(source);
};
/**
* 過載了預設的toString方法，使得返回資訊更加準確一些。
* @return {string} 物件的String表示形式
*/
baidu.lang.Class.prototype.toString = function(){
return "[object " + (this._className || "Object" ) + "]";
};
/**
* 釋放物件所持有的資源，主要是自定義事件。
* @name dispose
* @grammar obj.dispose()
*/
baidu.lang.Class.prototype.dispose = function(){
delete window[baidu.guid]._instances[this.guid];
for(var property in this){
if (!baidu.lang.isFunction(this[property])) {
delete this[property];
}
}
this.disposed = true;
};
/**
* 自定義的事件物件。
* @function
* @name baidu.lang.Event
* @grammar baidu.lang.Event(type[, target])
* @param {string} type 事件型別名稱。為了方便區分事件和一個普通的方法，事件型別名稱必須以"on"(小寫)開頭。
* @param {Object} [target]觸發事件的物件
* @meta standard
* @remark 引入該模組，會自動為Class引入3個事件擴充套件方法：addEventListener、removeEventListener和dispatchEvent。
* @see baidu.lang.Class
*/
baidu.lang.Event = function (type, target) {
this.type = type;
this.returnValue = true;
this.target = target || null;
this.currentTarget = null;
};
/**
* 註冊物件的事件監聽器。引入baidu.lang.Event後，Class的子類例項才會獲得該方法。
* @grammar obj.addEventListener(type, handler[, key])
* @param {string} type 自定義事件的名稱
* @param {Function} handler 自定義事件被觸發時應該呼叫的回撥函式
* @param {string} [key] 為事件監聽函式指定的名稱，可在移除時使用。如果不提供，方法會預設為它生成一個全域性唯一的key。
* @remark 事件型別區分大小寫。如果自定義事件名稱不是以小寫"on"開頭，該方法會給它加上"on"再進行判斷，即"click"和"onclick"會被認為是同一種事件。
*/
baidu.lang.Class.prototype.addEventListener = function (type, handler, key) {
if (!baidu.lang.isFunction(handler)) {
return;
}
!this.__listeners && (this.__listeners = {});
var t = this.__listeners, id;
if (typeof key == "string" && key) {
if (/[^\w\-]/.test(key)) {
throw("nonstandard key:" + key);
} else {
handler.hashCode = key;
id = key;
}
}
type.indexOf("on") != 0 && (type = "on" + type);
typeof t[type] != "object" && (t[type] = {});
id = id || baidu.lang.guid();
handler.hashCode = id;
t[type][id] = handler;
};
/**
* 移除物件的事件監聽器。引入baidu.lang.Event後，Class的子類例項才會獲得該方法。
* @grammar obj.removeEventListener(type, handler)
* @param {string} type 事件型別
* @param {Function|string} handler 要移除的事件監聽函式或者監聽函式的key
* @remark 如果第二個引數handler沒有被繫結到對應的自定義事件中，什麼也不做。
*/
baidu.lang.Class.prototype.removeEventListener = function (type, handler) {
if (baidu.lang.isFunction(handler)) {
handler = handler.hashCode;
} else if (!baidu.lang.isString(handler)) {
return;
}
!this.__listeners && (this.__listeners = {});
type.indexOf("on") != 0 && (type = "on" + type);
var t = this.__listeners;
if (!t[type]) {
return;
}
t[type][handler] && delete t[type][handler];
};
/**
* 派發自定義事件，使得繫結到自定義事件上面的函式都會被執行。引入baidu.lang.Event後，Class的子類例項才會獲得該方法。
* @grammar obj.dispatchEvent(event, options)
* @param {baidu.lang.Event|String} event Event物件，或事件名稱(1.1.1起支援)
* @param {Object} options 擴充套件引數,所含屬性鍵值會擴充套件到Event物件上(1.2起支援)
* @remark 處理會呼叫通過addEventListenr繫結的自定義事件回撥函式之外，還會呼叫直接繫結到物件上面的自定義事件。
* 例如：<br>
* myobj.onMyEvent = function(){}<br>
* myobj.addEventListener("onMyEvent", function(){});
*/
baidu.lang.Class.prototype.dispatchEvent = function (event, options) {
if (baidu.lang.isString(event)) {
event = new baidu.lang.Event(event);
}
!this.__listeners && (this.__listeners = {});
options = options || {};
for (var i in options) {
event[i] = options[i];
}
var i, t = this.__listeners, p = event.type;
event.target = event.target || this;
event.currentTarget = this;
p.indexOf("on") != 0 && (p = "on" + p);
baidu.lang.isFunction(this[p]) && this[p].apply(this, arguments);
if (typeof t[p] == "object") {
for (i in t[p]) {
t[p][i].apply(this, arguments);
}
}
return event.returnValue;
};
/**
* 為型別構造器建立繼承關係
* @name baidu.lang.inherits
* @function
* @grammar baidu.lang.inherits(subClass, superClass[, className])
* @param {Function} subClass 子類構造器
* @param {Function} superClass 父類構造器
* @param {string} className 類名標識
* @remark 使subClass繼承superClass的prototype，
* 因此subClass的例項能夠使用superClass的prototype中定義的所有屬性和方法。<br>
* 這個函式實際上是建立了subClass和superClass的原型鏈整合，並對subClass進行了constructor修正。<br>
* <strong>注意：如果要繼承建構函式，需要在subClass裡面call一下，具體見下面的demo例子</strong>
* @shortcut inherits
* @meta standard
* @see baidu.lang.Class
*/
baidu.lang.inherits = function (subClass, superClass, className) {
var key, proto,
selfProps = subClass.prototype,
clazz = new Function();
clazz.prototype = superClass.prototype;
proto = subClass.prototype = new clazz();
for (key in selfProps) {
proto[key] = selfProps[key];
}
subClass.prototype.constructor = subClass;
subClass.superClass = superClass.prototype;
if ("string" == typeof className) {
proto._className = className;
}
};
/**
* @ignore
* @namespace baidu.dom 操作dom的方法。
*/
baidu.dom = baidu.dom || {};
/**
* 從文件中獲取指定的DOM元素
*
* @param {string|HTMLElement} id 元素的id或DOM元素
* @meta standard
* @return {HTMLElement} DOM元素，如果不存在，返回null，如果引數不合法，直接返回引數
*/
baidu._g = baidu.dom._g = function (id) {
if (baidu.lang.isString(id)) {
return document.getElementById(id);
}
return id;
};
/**
* 從文件中獲取指定的DOM元素
* @name baidu.dom.g
* @function
* @grammar baidu.dom.g(id)
* @param {string|HTMLElement} id 元素的id或DOM元素
* @meta standard
*
* @returns {HTMLElement|null} 獲取的元素，查詢不到時返回null,如果引數不合法，直接返回引數
*/
baidu.g = baidu.dom.g = function (id) {
if ('string' == typeof id || id instanceof String) {
return document.getElementById(id);
} else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) {
return id;
}
return null;
};
/**
* 在目標元素的指定位置插入HTML程式碼
* @name baidu.dom.insertHTML
* @function
* @grammar baidu.dom.insertHTML(element, position, html)
* @param {HTMLElement|string} element 目標元素或目標元素的id
* @param {string} position 插入html的位置資訊，取值為beforeBegin,afterBegin,beforeEnd,afterEnd
* @param {string} html 要插入的html
* @remark
*
* 對於position引數，大小寫不敏感<br>
* 引數的意思：beforeBegin<span>afterBegin this is span! beforeEnd</span> afterEnd <br />
* 此外，如果使用本函式插入帶有script標籤的HTML字串，script標籤對應的指令碼將不會被執行。
*
* @shortcut insertHTML
* @meta standard
*
* @returns {HTMLElement} 目標元素
*/
baidu.insertHTML = baidu.dom.insertHTML = function (element, position, html) {
element = baidu.dom.g(element);
var range,begin;
if (element.insertAdjacentHTML) {
element.insertAdjacentHTML(position, html);
} else {
// 這裡不做"undefined" != typeof(HTMLElement) && !window.opera判斷，其它瀏覽器將出錯？！
// 但是其實做了判斷，其它瀏覽器下等於這個函式就不能執行了
range = element.ownerDocument.createRange();
// FF下range的位置設定錯誤可能導致創建出來的fragment在插入dom樹之後html結構亂掉
// 改用range.insertNode來插入html, by wenyuxiang @ 2010-12-14.
position = position.toUpperCase();
if (position == 'AFTERBEGIN' || position == 'BEFOREEND') {
range.selectNodeContents(element);
range.collapse(position == 'AFTERBEGIN');
} else {
begin = position == 'BEFOREBEGIN';
range[begin ? 'setStartBefore' : 'setEndAfter'](element);
range.collapse(begin);
}
range.insertNode(range.createContextualFragment(html));
}
return element;
};
/**
* 為目標元素新增className
* @name baidu.dom.addClass
* @function
* @grammar baidu.dom.addClass(element, className)
* @param {HTMLElement|string} element 目標元素或目標元素的id
* @param {string} className 要新增的className，允許同時新增多個class，中間使用空白符分隔
* @remark
* 使用者應保證提供的className合法性，不應包含不合法字元，className合法字元參考：http://www.w3.org/TR/CSS2/syndata.html。
* @shortcut addClass
* @meta standard
*
* @returns {HTMLElement} 目標元素
*/
baidu.ac = baidu.dom.addClass = function (element, className) {
element = baidu.dom.g(element);
var classArray = className.split(/\s+/),
result = element.className,
classMatch = " " + result + " ",
i = 0,
l = classArray.length;
for (; i < l; i++){
if ( classMatch.indexOf( " " + classArray[i] + " " ) < 0 ) {
result += (result ? ' ' : '') + classArray[i];
}
}
element.className = result;
return element;
};
/**
* @ignore
* @namespace baidu.event 遮蔽瀏覽器差異性的事件封裝。
* @property target 事件的觸發元素
* @property pageX 滑鼠事件的滑鼠x座標
* @property pageY 滑鼠事件的滑鼠y座標
* @property keyCode 鍵盤事件的鍵值
*/
baidu.event = baidu.event || {};
/**
* 事件監聽器的儲存表
* @private
* @meta standard
*/
baidu.event._listeners = baidu.event._listeners || [];
/**
* 為目標元素新增事件監聽器
* @name baidu.event.on
* @function
* @grammar baidu.event.on(element, type, listener)
* @param {HTMLElement|string|window} element 目標元素或目標元素id
* @param {string} type 事件型別
* @param {Function} listener 需要新增的監聽器
* @remark
* 1. 不支援跨瀏覽器的滑鼠滾輪事件監聽器新增<br>
* 2. 改方法不為監聽器灌入事件物件，以防止跨iframe事件掛載的事件物件獲取失敗
* @shortcut on
* @meta standard
* @see baidu.event.un
*
* @returns {HTMLElement|window} 目標元素
*/
baidu.on = baidu.event.on = function (element, type, listener) {
type = type.replace(/^on/i, '');
element = baidu._g(element);
var realListener = function (ev) {
// 1. 這裡不支援EventArgument, 原因是跨frame的事件掛載
// 2. element是為了修正this
listener.call(element, ev);
},
lis = baidu.event._listeners,
filter = baidu.event._eventFilter,
afterFilter,
realType = type;
type = type.toLowerCase();
// filter過濾
if(filter && filter[type]){
afterFilter = filter[type](element, type, realListener);
realType = afterFilter.type;
realListener = afterFilter.listener;
}
// 事件監聽器掛載
if (element.addEventListener) {
element.addEventListener(realType, realListener, false);
} else if (element.attachEvent) {
element.attachEvent('on' + realType, realListener);
}
// 將監聽器儲存到陣列中
lis[lis.length] = [element, type, listener, realListener, realType];
return element;
};
/**
* 為目標元素移除事件監聽器
* @name baidu.event.un
* @function
* @grammar baidu.event.un(element, type, listener)
* @param {HTMLElement|string|window} element 目標元素或目標元素id
* @param {string} type 事件型別
* @param {Function} listener 需要移除的監聽器
* @shortcut un
* @meta standard
*
* @returns {HTMLElement|window} 目標元素
*/
baidu.un = baidu.event.un = function (element, type, listener) {
element = baidu._g(element);
type = type.replace(/^on/i, '').toLowerCase();
var lis = baidu.event._listeners,
len = lis.length,
isRemoveAll = !listener,
item,
realType, realListener;
//如果將listener的結構改成json
//可以節省掉這個迴圈，優化效能
//但是由於un的使用頻率並不高，同時在listener不多的時候
//遍歷陣列的效能消耗不會對程式碼產生影響
//暫不考慮此優化
while (len--) {
item = lis[len];
// listener存在時，移除element的所有以listener監聽的type型別事件
// listener不存在時，移除element的所有type型別事件
if (item[1] === type
&& item[0] === element
&& (isRemoveAll || item[2] === listener)) {
realType = item[4];
realListener = item[3];
if (element.removeEventListener) {
element.removeEventListener(realType, realListener, false);
} else if (element.detachEvent) {
element.detachEvent('on' + realType, realListener);
}
lis.splice(len, 1);
}
}
return element;
};
/**
* 阻止事件的預設行為
* @name baidu.event.preventDefault
* @function
* @grammar baidu.event.preventDefault(event)
* @param {Event} event 事件物件
* @meta standard
*/
baidu.preventDefault = baidu.event.preventDefault = function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
};
})();
/**
* @exports DistanceTool as BMapLib.DistanceTool
*/
var DistanceTool =
/**
* DistanceTool類的建構函式
* @class 距離測算類，實現測距效果的<b>入口</b>。
* 例項化該類後，即可呼叫該類提供的open
* 方法開啟測距狀態。
*
* @constructor
* @param {Map} map Baidu map的例項物件
* @param {Json Object} opts 可選的輸入引數，非必填項。可輸入選項包括：<br />
* {"<b>followText</b>" : {String} 測距過程中，提示框文字,
* <br />"<b>unit</b>" : {String} 測距結果所用的單位制，可接受的屬性為"metric"表示米制和"us"表示美國傳統單位,
* <br />"<b>lineColor</b>" : {String} 折線顏色,
* <br />"<b>lineStroke</b>" : {Number} 折線寬度,
* <br />"<b>opacity</b>" : {Number} 透明度,
* <br />"<b>lineStyle</b>" : {String} 折線的樣式，只可設定solid和dashed,
* <br />"<b>secIcon</b>" : {BMap.Icon} 轉折點的Icon,
* <br />"<b>closeIcon</b>" : {BMap.Icon} 關閉按鈕的Icon,
* <br />"<b>cursor</b>" : {String} 跟隨的滑鼠樣式}
*
* @example <b>參考示例：</b><br />
* var map = new BMap.Map("container");<br />map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);<br />var myDistanceToolObject = new BMapLib.DistanceTool(map, {lineStroke : 2});
*/
BMapLib.DistanceTool = function(map, opts){
if (!map) {
return;
}
/**
* map物件
* @private
* @type {Map}
*/
this._map = map;
opts = opts || {};
/**
* _opts是預設引數賦值。
* 下面通過使用者輸入的opts，對預設引數賦值
* @private
* @type {Json}
*/
this._opts = baidu.extend(
baidu.extend(this._opts || {}, {
/**
* 測距提示
* @private
* @type {String}
*/
tips : "測距",
/**
* 測距過程中，提示框文字
* @private
* @type {String}
*/
followText : "單擊確定地點，雙擊結束",
/**
* 測距結果所用的單位制，可接受的屬性為"metric"表示米制和"us"表示美國傳統單位
* @private
* @type {String}
*/
unit : "metric",
/**
* 折線顏色
* @private
* @type {String}
*/
lineColor : "#ff6319",
/**
* 折線線寬
* @private
* @type {Number}
*/
lineStroke : 2,
/**
* 折線透明度
* @private
* @type {Number}
*/
opacity : 0.8,
/**
* 折線樣式
* @private
* @type {String}
*/
lineStyle : "solid",
/**
* 跟隨滑鼠樣式
* @private
* @type {String}
*/
cursor : "http://api.map.baidu.com/images/ruler.cur",
/**
* 轉折點的ICON樣式
* @private
* @type {BMap.Icon}
*/
secIcon : null,
/**
* 轉折點的ICON樣式
* @private
* @type {BMap.Icon}
*/
closeIcon : null
})
, opts);
/**
* 跟隨的title覆蓋物
* @private
* @type {BMap.Label}
*/
this._followTitle = null;
/**
* 折線包含所有點的陣列
* @private
* @type {Array}
*/
this._points = [];
/**
* 折線所包含的所有path陣列
* @private
* @type {Array}
*/
this._paths = [];
/**
* 折線結點圖片陣列
* @private
* @type {Array}
*/
this._dots = [];
/**
* 折線測距包含所有線段的距離
* @private
* @type {Array}
*/
this._segDistance = [];
/**
* 覆蓋物的陣列
* @private
* @type {Array}
*/
this._overlays = [];
/**
* 是否在呼叫map.clearOverlays清除畫線需要建立的相關overlay元素
* @private
* @type {Boolean}
*/
this._enableMassClear = true,
/**
* 單位制，儲存語言包中定義的單位名稱
* @private
* @type {Json}
*/
this._units = {
// metric 表示米制
metric : {
/**
* 米制的名稱
* @type {String}
*/
name : "metric",
/**
* 和米制的換算關係
* @type {Number}
*/
conv : 1,
/**
* 米制單位下兩個單位制之間的換算關係
* @type {Number}
*/
incon : 1000,
/**
* 米制單位下較小單位
* @type {String}
*/
u1 : "米",
/**
* 米制單位下較大單位
* @type {String}
*/
u2 : "公里"
},
// us 表示美國傳統單位，各引數意義同上metric
us : {
name : "us",
conv : 3.2808,
incon : 5279.856,
u1 : "英尺",
u2 : "英里"
}
};
/**
* 是否已經開啟了測距狀態
* @private
* @type {Boolean}
*/
this._isOpen = false;
/**
* 未點選任何一點時，滑鼠移動時的跟隨提示文字
* @private
* @type {String}
*/
this._startFollowText = "單擊確定起點";
/**
* 地圖移動的計時器
* @private
* @type {Object}
*/
this._movingTimerId = null;
/**
* 測距需要新增的CSS樣式
* @private
* @type {Json}
*/
this._styles = {
"BMapLib_diso" : "height:17px;width:5px;position:absolute;background:url(http://api.map.baidu.com/images/dis_box_01.gif) no-repeat left top"
,"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"
,"BMapLib_disBoxDis" : "color:rgb(51, 51, 51);font-weight:bold"
};
if (this._opts.lineStroke <= 0) {
this._opts.lineStroke = 2;
}
if (this._opts.opacity > 1) {
this._opts.opacity = 1;
} else if (this._opts.opacity < 0) {
this._opts.opacity = 0;
}
if (this._opts.lineStyle != "solid" &&
this._opts.lineStyle != "dashed") {
this._opts.lineStyle = "solid";
}
if (!this._units[this._opts.unit]) {
this._opts.unit = "metric";
}
this.text = "測距";
}
// 通過baidu.lang下的inherits方法，讓DistanceTool繼承baidu.lang.Class
baidu.lang.inherits(DistanceTool, baidu.lang.Class, "DistanceTool");
/**
* 地圖區域的移動事件繫結
* @return 無返回值
*/
DistanceTool.prototype._bind = function(){
// 設定滑鼠樣式
this._setCursor(this._opts.cursor);
var me = this;
// 在裝載地圖的頁面元素上，繫結滑鼠移動事件
baidu.on(this._map.getContainer(), "mousemove", function(e){
if (!me._isOpen) {
return;
}
if (!me._followTitle) {
return;
}
e = window.event || e;
var t = e.target || e.srcElement;
// 如果觸發該事件的頁面元素不是遮蓋效果層，則返回，無操作
if (t != OperationMask.getDom(me._map)) {
me._followTitle.hide();
return;
}
if (!me._mapMoving) {
me._followTitle.show();
}
// 設定滑鼠移動過程中，跟隨的文字提示框的位置
var pt = OperationMask.getDrawPoint(e, true);
me._followTitle.setPosition(pt);
});
// 建立滑鼠跟隨的文字提示框
if (this._startFollowText) {
var t = this._followTitle = new BMap.Label(this._startFollowText, {offset : new BMap.Size(14, 16)});
this._followTitle.setStyles({color : "#333", borderColor : customStyle.borderColor});
}
};
/**
* 開啟地圖的測距狀態
* @return {Boolean}，開啟測距狀態成功，返回true；否則返回false。
*
* @example <b>參考示例：</b><br />
* myDistanceToolObject.open();
*/
DistanceTool.prototype.open = function(){
// 判斷測距狀態是否已經開啟
if (this._isOpen == true){
return true;
}
// 已有其他地圖上的滑鼠操作工具開啟
if (!!BMapLib._toolInUse) {
return;
}
this._isOpen = true;
BMapLib._toolInUse = true;
// 判斷是否是否在移動過程中
if (this._mapMoving){
delete this._mapMoving;
}
var me = this;
// 增加滑鼠在地圖區域移動的事件
// 通過binded引數，避免多次繫結
if (!this._binded) {
this._binded = true;
// 繫結控制元件項事件
this._bind();
// 地圖的移動過程中，需要隱藏相關的提示框
this._map.addEventListener("moving", function(){
me._hideCurrent();
});
}
// 將文字提示框作為BMap.Label元素，提交給Map Api進行管理
if (this._followTitle) {
this._map.addOverlay(this._followTitle);
this._followTitle.hide();
}
/**
* 測距過程中，點選地圖時，觸發的操作
* @ignore
* @param {Object} e event物件
*/
var distClick = function(e) {
var map = me._map;
if (!me._isOpen) {
return;
}
// 通過event物件，計算得出點選位置的物理座標，poi為一個BMap.Point物件
e = window.event || e;
var poi = OperationMask.getDrawPoint(e, true);
// 驗證計算得出的該點的位置合理性
if (!me._isPointValid(poi)) {
return;
}
//判斷標點所屬城市，非本城市不允許標點
geoc.getLocation(poi, function(rs){
var addComp = rs.addressComponents;
//海南省的都不限，海南站點包含了海南全部的城市
//崑山是蘇州下面的一個縣級市，也需要特殊處理
if((city == '海南' && addComp.province == '海南省')
|| (city == '崑山' && addComp.city == '蘇州市' && addComp.district == '崑山市')){
}else if(addComp.city.replace('市','') != city){
alert('只能在本城市範圍內標點');
isSelfCity = false;
return false;
}
//else{
// 記錄當前點的螢幕位置
me._bind.initX = e.pageX || e.clientX || 0;
me._bind.initY = e.pageY || e.clientY || 0;
// 這個if迴圈內的計算是，判斷當前這個點，與儲存內的最後一個點的距離，
// 如果距離過小，比如小於5，可以認為是使用者的誤點，可以忽略掉
if (me._points.length > 0){
var lstPx = map.pointToPixel(me._points[me._points.length - 1]);
var thisPx = map.pointToPixel(poi);
var dis = Math.sqrt(Math.pow(lstPx.x - thisPx.x, 2) + Math.pow(lstPx.y - thisPx.y, 2));
if (dis < 5) {
return;
}
}
pointList[pointList.length] = poi;
//處理ie相容問題，ie下使用e.layerX時定位有偏差
if(/msie|rv:11|windows\snt\s10/.test(navigator.userAgent.toLowerCase())){
me._bind.x = e.offsetX || e.layerX || 0;
me._bind.y = e.offsetY || e.layerY || 0;
}else{
me._bind.x = e.layerX || e.offsetX || 0;
me._bind.y = e.layerY || e.offsetY || 0;
}
me._points.push(poi);
// 新增測距結點
me._addSecPoint(poi);
// 調整跟蹤滑鼠的標籤
if (me._paths.length == 0) {
me._formatTitle(1, me._opts.followText, me._getTotalDistance());
}
// 修改確定線的顏色
if (me._paths.length > 0) {
me._paths[me._paths.length - 1].show();
me._paths[me._paths.length - 1].setStrokeOpacity(me._opts.opacity);
}
var path = new BMap.Polyline([poi, poi], {enableMassClear : me._enableMassClear});
me._map.addOverlay(path);
me._paths.push(path);
me._overlays.push(path);
addOverlayList[addOverlayList.length] = path;
// 測距模式下線樣式固定
path.setStrokeWeight(me._opts.lineStroke);
path.setStrokeColor(me._opts.lineColor);
path.setStrokeOpacity(me._opts.opacity / 2);
path.setStrokeStyle(me._opts.lineStyle);
// 如果地圖正在移動則隱藏掉
if (me._mapMoving){
path.hide();
}
if (me._points.length > 1) {
var siblingPath = me._paths[me._points.length - 2];
siblingPath.setPositionAt(1, poi);
}
// 生成節點旁邊的距離顯示框
var disText = "";
if (me._points.length > 1) {
// 非起點的節點，顯示當前的距離
var segDis = me._setSegDistance(me._points[me._points.length - 2], me._points[me._points.length - 1]);
var meters = me._getTotalDistance();
disText = me._formatDisStr(meters);
var disLabel = new BMap.Label(disText, {offset : new BMap.Size(-15, -50), enableMassClear : me._enableMassClear});
//disLabel.setStyles({color : "#333", borderColor : "#ff0103"});
disLabel.setStyles({color : "#333", borderColor : customStyle.borderColor});
me._map.addOverlay(disLabel);
me._formatSegLabel(disLabel, disText);
me._overlays.push(disLabel);
poi.disLabel = disLabel;
disLabel.setPosition(poi);
addOverlayList[addOverlayList.length] = disLabel;
} else {
//disText = "起點";
}
/**
* 測距過程中，每次點選底圖新增節點時，派發事件的介面
* @name DistanceTool#onaddpoint
* @event
* @param {Event Object} e 回撥函式會返回event引數，包括以下返回值：
* <br />{"<b>point</b> : {BMap.Point} 最新新增上的節點BMap.Point物件,
* <br />"<b>pixel</b>：{BMap.pixel} 最新新增上的節點BMap.Pixel物件,
* <br />"<b>index</b>：{Number} 最新新增的節點的索引,
* <br />"<b>distance</b>：{Number} 截止最新新增的節點的總距離}
*
* @example <b>參考示例：</b><br />
* myDistanceToolObject.addEventListener("addpoint", function(e) { alert(e.distance); });
*/
// 生成名為onaddpoint的baidu.lang.Event物件
// 並給該event物件新增上point、pixel、index和distance等屬性欄位
// 然後在此刻，將繫結在onaddpoint上事件，全部賦予event引數，然後派發出去
var event = new baidu.lang.Event("onaddpoint");
event.point = poi;
event.pixel = me._map.pointToPixel(poi);
event.index = me._points.length - 1;
event.distance = me._getTotalDistance().toFixed(0);
me.dispatchEvent(event);
//}
});
};
/**
* 測距過程中，滑鼠在地圖上移動時，觸發的操作
* @ignore
* @param {Object} e event物件
*/
var distMove = function(e) {
if (!me._isOpen){
return;
}
// 通過判斷陣列me._paths的長度，判斷當前是否已經有測量節點
// 也就是，如果沒有節點，則還沒有開始測量
if (me._paths.length > 0) {
// 通過event引數，計