Created
April 4, 2017 13:43
-
-
Save madneal/a68af93a186834d8514dd75406b9e6fb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Subway() {} | |
| /** | |
| * 解析XML | |
| * line和station对象 | |
| * 利用SVG画线和点 | |
| */ | |
| var sp = Subway.prototype; | |
| /** | |
| * 淡出时的透明度 | |
| */ | |
| sp.FADE_OPACITY = '0.3'; | |
| /** | |
| * 距最近地铁站的距离 | |
| * @type {number} | |
| */ | |
| sp.walkDistance = 0; | |
| /** | |
| * 起点是否是默认的最近地铁站 | |
| * @type {boolean} | |
| */ | |
| sp.isDefaultStart = true; | |
| /** | |
| * 求路的起点 | |
| * @type {string} | |
| */ | |
| sp.startname = ''; | |
| /** | |
| * 求路的终点 | |
| * @type {string} | |
| */ | |
| sp.endname = ''; | |
| /** | |
| * 路线经过的所有站点 | |
| * @type {Array} | |
| */ | |
| sp.routeStations = []; | |
| /** | |
| * 所经过站点的范围边界 | |
| * @type {top: , right: ,bottom: ,left:} | |
| */ | |
| sp.bounds = {}; | |
| /** | |
| * 气泡集合 | |
| * @type {{}} | |
| */ | |
| sp.bubbleMap = {}; | |
| /** | |
| * 气泡对象的属性集合 | |
| * @type {{}} | |
| */ | |
| sp.bubbleInfo = {}; | |
| /** | |
| * 求路得到的信息 | |
| * @type {{}} | |
| */ | |
| sp.routeData = {}; | |
| /** | |
| * 初始化 | |
| * a:xml信息 | |
| */ | |
| sp.init = function(a) { | |
| var t = this; | |
| t.FLAGNUM = 1; | |
| t.config = { | |
| LINE_WIDTH : 6 * t.FLAGNUM, | |
| LINE_NAME_X : -12 * t.FLAGNUM, | |
| LINE_NAME_Y : -12 * t.FLAGNUM, | |
| LINE_NAME_SIZE : 12 * t.FLAGNUM + "px", | |
| STATION_NAME_X : 0 * t.FLAGNUM, | |
| STATION_NAME_Y : 12 * t.FLAGNUM, | |
| STATION_X: -8, | |
| STATION_Y: -8, | |
| STATION_NAME_SIZE : 12 * t.FLAGNUM + "px", | |
| TRANSFERSTATION_WIDTH : 16 * t.FLAGNUM, | |
| TRANSFERSTATION_HEIGHT : 16 * t.FLAGNUM, | |
| TRANSFERSTATION_X: 0 - 16 * t.FLAGNUM / 2, | |
| TRANSFERSTATION_Y: 0 - 16 * t.FLAGNUM / 2, | |
| CIRCLE_RADIUS : 5 * t.FLAGNUM, | |
| CIRCLE_LINE_WIDTH : 2 * t.FLAGNUM, | |
| isShowWindow : false, | |
| VIEWPORT_MINIMUM: "0.6", | |
| VIEWPORT_MANIMUM: "1.2", | |
| BUBBLE_HEIGHT: 1.35,//气泡的高度(rem), | |
| MARGIN_HOR: 60,//左右安全边距 | |
| MARGIN_VER: 60//上下安全边距 | |
| } | |
| t.MAP_WIDTH = 2300; | |
| t.MAP_HEIGHT = 2300; | |
| t.SVG_WIDTH = 2300 * t.FLAGNUM; | |
| t.SVG_HEIGHT = 2300 * t.FLAGNUM; | |
| t.createSvg(); | |
| t.loadImg(); | |
| t.line = [];//存储全部线信息 | |
| t.lineObj = {}; | |
| t.station = [];//存储全部站点信息 | |
| t.stationObj = {}; | |
| t.xml = a;//获取到的xml信息 | |
| t.parseXML(); | |
| t.drawLine(); | |
| t.drawStation(); | |
| // t.setViewport(t.config.VIEWPORT_MINIMUM, t.config.VIEWPORT_MANIMUM, "0.8"); | |
| t.getGPSPoint(); | |
| t.nearStation(); | |
| t.initMap(); | |
| //点击空白处，站点信息隐藏 | |
| $('#container1').on('click', function(){ | |
| $('#container3').hide(); | |
| }); | |
| }; | |
| sp.initMap = function () { | |
| var t = this; | |
| // $('#container1').css('transform-origin', 'left top'); | |
| // $('#container1').css('transform', ''); | |
| setTimeout(function() { | |
| if (!t.nearStationObject)//无定位点显示页面中心 | |
| t.scrollWindow(t.SVG_WIDTH / 2 - window.innerWidth / 2, t.SVG_HEIGHT / 2 - window.innerHeight / 2); | |
| else {//有定位点显示定位点并弹窗 | |
| var a, b = {}, c, d, f; | |
| a = t.nearStationObject.ex;// + t.config.TRANSFERSTATION_X | |
| if (a) {//换乘站需要 + t.config.TRANSFERSTATION_X + t.config.TRANSFERSTATION_Y | |
| b.x = t.nearStationObject.x + t.config.TRANSFERSTATION_X; | |
| b.y = t.nearStationObject.y + t.config.TRANSFERSTATION_Y; | |
| } else { | |
| c = t.nearStationObject.id; | |
| //普通站需要 + t.config.STATION_X + t.config.STATION_Y | |
| b.x = t.nearStationObject.x + t.config.STATION_X; | |
| b.y = t.nearStationObject.y + t.config.STATION_Y; | |
| } | |
| b.GPS = 1; | |
| //如果没有恢复线路，则起点默认填入最近的地铁站 | |
| if(!sw.startname){ | |
| $('#start').val(t.nearStationObject.id); | |
| t.startname = t.nearStationObject.id; | |
| $('#start').change(); | |
| t.showMyPos(); | |
| t.scrollWindow(t.nearStationObject.x - window.innerWidth / 2, t.nearStationObject.y - window.innerHeight / 2); | |
| } | |
| } | |
| }, 50); | |
| } | |
| /** | |
| * 绘制遮挡层 | |
| */ | |
| sp.setMask = function() { | |
| if(!this.mask){ | |
| //插入蒙版 | |
| var c1 = document.createElementNS("http://www.w3.org/2000/svg","rect"); | |
| c1.setAttribute("x","-20"); | |
| c1.setAttribute("y","-20"); | |
| c1.setAttribute("width", '100%'); | |
| c1.setAttribute("height",'100%'); | |
| c1.setAttribute("fill","rgb(255,255,255)"); | |
| c1.setAttribute("fill-opacity","0.8"); | |
| c1.setAttribute("stroke","rgb(0,0,0)"); | |
| c1.setAttribute("stroke-width","0"); | |
| c1.setAttribute("id","mask"); | |
| this.mask = c1; | |
| } | |
| this.mySVGContainer.appendChild(this.mask); | |
| this.mask.style.display = 'block'; | |
| }; | |
| /** | |
| * 移除遮挡层 | |
| */ | |
| sp.removeMask = function() { | |
| if(this.mask) { | |
| this.mask.style.display = 'none'; | |
| // this.mySVGContainer.removeChild(this.mask); | |
| // this.mask = null; | |
| } | |
| } | |
| /** | |
| * 获取传过来的GPS坐标 | |
| */ | |
| sp.getGPSPoint = function() { | |
| var t = this, a, b = []; | |
| a = getParam("loc"); | |
| if (!a) { | |
| return; | |
| } | |
| b = a.split(","); | |
| t.gpsX = parseFloat(b[0]) || 0; | |
| t.gpsY = parseFloat(b[1]) || 0; | |
| }; | |
| /** | |
| * 计算到地铁站的距离 | |
| */ | |
| sp.getDistance = function(pos, station){ | |
| // var myx = mercator_wgs84(pos.x, pos.y)[0]; | |
| // var myy = mercator_wgs84(pos.x, pos.y)[1]; | |
| // var sx = mercator_wgs84(station.mx, station.my)[0]; | |
| // var sy = mercator_wgs84(station.mx, station.my)[1]; | |
| var tx = pos.x - station.mx; | |
| var ty = pos.y - station.my; | |
| var distance = Math.sqrt(tx * tx + ty * ty); | |
| return parseInt(distance); | |
| }; | |
| /** | |
| * 计算最近的地铁站 | |
| */ | |
| sp.nearStation = function() { | |
| var t = this, a, b, c = [], d, e = [], f, g, h; | |
| if (t.gpsX && t.gpsY) { | |
| a = t.station; | |
| b = a.length; | |
| for (var i = 0; i < b; i ++) { | |
| var O = a[i]; | |
| if (O.iu && O.mx && O.my) { | |
| c.push(O); | |
| } | |
| } | |
| d = c.length; | |
| if (!d) | |
| return; | |
| for (var i = 0; i < d; i ++) { | |
| var O = c[i], mx, my, tx, ty, rs; | |
| mx = O.mx | |
| my = O.my; | |
| if (mx && my) { | |
| tx = t.gpsX - mx; | |
| ty = t.gpsY - my; | |
| rs = Math.sqrt(tx * tx + ty * ty); | |
| e.push(rs); | |
| } | |
| } | |
| f = Array.min(e);//获得最小值 | |
| t.walkDistance = f; | |
| if (f >= 800) | |
| return; | |
| g = e.length; | |
| for (var i = 0; i < g; i ++) { | |
| if (f == e[i]) { | |
| h = i; | |
| break; | |
| } | |
| } | |
| return t.nearStationObject = c[h]; | |
| } | |
| }; | |
| /** | |
| * 加载图片 | |
| */ | |
| sp.loadImg = function() { | |
| var t = this, a, b; | |
| a = "data:image/png;base64,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"; | |
| var b = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAIAAAC1w6d9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnNJREFUeNrsmc1LAkEYxl+3hRUMhASFAqFAocCDULdudetWt271z/QndOzmrW7eutXNDsFCgYIHIUHBQChQKOwZBqZVd2dnP9Qp9kXCanN++8zzfsyWmkwmpGWYNZs0JesMNSUziBKyhOzvkOUzdF6hrKUf2WGRilmqFPQjK+fYV8Bp6jPsqV5kQqq0qXFuxrWhST1buc8QcZW0+DXLppPdVAlrTUuyo2062Pr9dn8znsJhRJTqdHcKixdbtPZKPvK0Hd7pFsMqrLv/9qTMUuGxs3QyPvPIexGmD9DXW0skw05BEqUrC2SZVG/S+HvxPoPfFbHEdAR1QySvEdHvKgEvXlYDD0hGIGPx8TBcY8CfB4JTIkN9wud6paFiIF2gnHo1MVT8Lk/D3gc5D/p2T/Zp8KginE9unpRkhw5A2H2GxY8nPFAmUMbwk1LO/X4Ah4t9q4kp8fvZnnufGY4YUOPNsxYMx2xhq83SBc1qno/f7X1bVk1ML79DrXljQR6uk0pgVYiHG3DlAxxWuXkOSHa8M4U1+qLWgC0DMYKG4ENes66QnqomgOt/BiEDiti4RpfpFKKIz/BBabxgfycf2lcwMn71U5cUn66pP4QTfNhfaIZX6z0IWZQZQZ0P6SWpvSatLqC0ROzkvLkqMucZE9aOJczoTKgCzg7GamHGp74vlgztS9J8kHR3r2Eqcwy7iZEGannNIChUF9VIx7uQZFjS9ykBP96FftZnRLc8OhjOILcv7P11g5qDWb6l+owLJuYz8TgIxoK98F5MbJgrl0qG9SCP0+AYAsQcANaaTaUNlqehMzR19aDpfxGT7vSfyH4EGABTb7iy4zJ6TwAAAABJRU5ErkJggg=="; | |
| t.pics = {}; | |
| t.pics.transfer = new Image(); | |
| t.pics.transfer.src = a; | |
| t.pics.transfer.onload = function() { | |
| transferImgLoaded = true; | |
| }; | |
| t.pics.icon_ap = new Image(); | |
| t.pics.icon_ap.src = b; | |
| t.pics.icon_ap.onload = function() { | |
| ptImgLoaded = true | |
| }; | |
| }; | |
| /** | |
| * 解析XML | |
| * （重点属性解释） | |
| * line标签解释如下： | |
| * id：线路名称标识 | |
| * lb：线路全称 | |
| * lbx、lby：线路名称显示的坐标 | |
| * inuse：线路是否开通 | |
| * loop：线路是否是环线 | |
| * rx、ry：画弧度使用，利用贝塞尔曲线-quadraticCurveTo | |
| * lc：线路颜色 | |
| * n：线坐标的数量 | |
| ************************************************************************ | |
| * 站点标签解释如下： | |
| * id：站点名称标识（与line的id对应） | |
| * lb：站点名全称 | |
| * lx、ly：坐标偏移值，用来显示文字 | |
| * ex：是否是换乘站 | |
| * iu：站点是否启用 | |
| * st、si：首末车时间 | |
| * ln：站点对应的线路名称 | |
| * 最好加入线路的颜色值，避免匹配 | |
| */ | |
| sp.parseXML = function() { | |
| var t = this, a, b, c, d, e, f, g, h; | |
| a = new DOMParser(); | |
| b = a.parseFromString(t.xml, "text/xml"); | |
| console.log(b); | |
| try{ | |
| c = b.getElementsByTagName("subway")[0].getAttribute("zh"); | |
| }catch(e){console.log(e);} | |
| t.line.city = c;//获取城市 | |
| d = b.getElementsByTagName("l");//获取线数组 | |
| for (var i = 0; i < d.length; i ++) { | |
| var O = d[i], line = {};//存储线信息 | |
| line.points = [];//存储线的点 | |
| line.id = O.getAttribute("id"); | |
| line.lb = O.getAttribute("lb"); | |
| line.py = parseFloat(O.getAttribute("py")) || 0; | |
| line.n = parseFloat(O.getAttribute("n")) || 0; | |
| line.loop = (O.getAttribute("loop") == "true"); | |
| line.lbx = parseFloat(O.getAttribute("lbx")) * t.FLAGNUM || 0; | |
| line.lbx = Math.floor(line.lbx + t.SVG_WIDTH / 2); | |
| line.lby = parseFloat(O.getAttribute("lby")) * t.FLAGNUM || 0; | |
| line.lby = Math.floor(line.lby + t.SVG_HEIGHT / 2); | |
| line.inuse = parseFloat(O.getAttribute("inuse")) || 0; | |
| line.lc = "#" + O.getAttribute("lc").split("0x")[1]; | |
| var p = O.getElementsByTagName("p");//获取线内点的数组 | |
| for (var j = 0; j < p.length; j ++) { | |
| var OP = p[j], op = {}; | |
| op.id = OP.getAttribute("id"); | |
| op.x = parseFloat(OP.getAttribute("x")) * t.FLAGNUM; | |
| (op.x != null) && (op.x = Math.floor(op.x + t.SVG_WIDTH / 2)); | |
| op.y = parseFloat(OP.getAttribute("y")) * t.FLAGNUM; | |
| (op.y != null) && (op.y = Math.floor(op.y + t.SVG_HEIGHT / 2)); | |
| op.rx = parseFloat(OP.getAttribute("rx")) * t.FLAGNUM;//若有值，则为曲线 | |
| (op.rx != null) && (op.rx = Math.floor(op.rx + t.SVG_WIDTH / 2)); | |
| op.ry = parseFloat(OP.getAttribute("ry")) * t.FLAGNUM; | |
| (op.ry != null) && (op.ry = Math.floor(op.ry + t.SVG_HEIGHT / 2)); | |
| line.points.push(op); | |
| } | |
| t.line.push(line); | |
| t.lineObj[line.id] = line; | |
| } | |
| e = b.getElementsByTagName("s");//获取站点数组 | |
| for (var i = 0; i < e.length; i ++) { | |
| var O = e[i], station = {};//存储站点信息 | |
| station.id = O.getAttribute("id"); | |
| station.lb = O.getAttribute("lb"); | |
| station.x = parseFloat(O.getAttribute("x")) * t.FLAGNUM; | |
| (station.x != null) && (station.x = Math.floor(station.x + t.SVG_WIDTH / 2)); | |
| station.y = parseFloat(O.getAttribute("y")) * t.FLAGNUM; | |
| (station.y != null) && (station.y = Math.floor(station.y + t.SVG_HEIGHT / 2)); | |
| station.lx = (parseFloat(O.getAttribute("x")) + parseFloat(O.getAttribute("lx"))) * t.FLAGNUM; | |
| (station.lx != null) && (station.lx = Math.floor(station.lx + t.SVG_WIDTH / 2)); | |
| station.ly = (parseFloat(O.getAttribute("y")) + parseFloat(O.getAttribute("ly"))) * t.FLAGNUM; | |
| (station.ly != null) && (station.ly = Math.floor(station.ly + t.SVG_HEIGHT / 2)); | |
| station.ex = (O.getAttribute("ex") == "true"); | |
| station.iu = (O.getAttribute("iu") == "true"); | |
| station.slb = (O.getAttribute("slb") == "true"); | |
| station.ln = O.getAttribute("ln"); | |
| station.int = parseFloat(O.getAttribute("int")); | |
| station.uid = O.getAttribute("uid"); | |
| station.dataId = O.getAttribute("dataid"); | |
| station.mx = parseFloat(O.getAttribute("mx")) || 0; | |
| station.my = parseFloat(O.getAttribute("my")) || 0; | |
| var lns = O.getElementsByTagName("ln"), snArr = []; | |
| station.lns = [];//存储站点首末车时间 | |
| if (lns && lns.length > 0) { | |
| for (var j = 0; j < lns.length; j ++) {//获取站点首末车时间 | |
| var lnO = lns[j], ln = {}, lnName, lnFlag = 0; | |
| ln.id = lnO.getAttribute("id"); | |
| if (ln.id.indexOf("(") > -1) { | |
| lnName = ln.id.substr(0, ln.id.indexOf("(")); | |
| } else | |
| lnName = ln.id; | |
| for (var m = 0; m < station.lns.length; m ++) { | |
| var mso = station.lns[m]; | |
| if (mso.id.indexOf(lnName) > -1) { | |
| ln = mso; | |
| lnFlag = 1; | |
| break; | |
| } | |
| } | |
| if (!lnFlag) { | |
| if (t.line.length > 0) {//匹配站点颜色 | |
| for (var m = 0; m < t.line.length; m ++) { | |
| if (ln.id == t.line[m].id) { | |
| snArr.push(t.line[m].lc); | |
| break; | |
| } | |
| } | |
| } | |
| } | |
| var fxs = lnO.getElementsByTagName("fx"); | |
| if (!lnFlag) { | |
| ln.fx = []; | |
| for (var k = 0; k < fxs.length; k ++) { | |
| var fxO = fxs[k],fx = {}; | |
| fx.name = fxO.getAttribute("name"); | |
| fx.st = fxO.getAttribute("st"); | |
| fx.si = fxO.getAttribute("si"); | |
| fx.et = fxO.getAttribute("et"); | |
| fx.ei = fxO.getAttribute("ei"); | |
| fx.msg = fxO.getAttribute("msg"); | |
| ln.fx.push(fx); | |
| } | |
| station.lns.push(ln); | |
| } else { | |
| for (var k = 0; k < fxs.length; k ++) { | |
| var fxO = fxs[k], fx = {}, fxFlag = 0; | |
| fx.name = fxO.getAttribute("name"); | |
| for (var m = 0; m < ln.fx.length; m ++) { | |
| if (fx.name == ln.fx[m].name) { | |
| fxFlag = 1; | |
| break; | |
| } | |
| } | |
| if (fxFlag) | |
| continue; | |
| fx.st = fxO.getAttribute("st"); | |
| fx.si = fxO.getAttribute("si"); | |
| fx.et = fxO.getAttribute("et"); | |
| fx.ei = fxO.getAttribute("ei"); | |
| fx.msg = fxO.getAttribute("msg"); | |
| ln.fx.push(fx); | |
| } | |
| } | |
| } | |
| } | |
| station.lc = snArr; | |
| t.station.push(station); | |
| t.stationObj[station.id] = station; | |
| } | |
| }; | |
| /** | |
| * 创建svg画布 | |
| */ | |
| sp.createSvg = function() { | |
| var a = document.getElementById("container1"),b,t = this; | |
| if ($(SVG_ID))//删除已存在的svg画布 | |
| $(SVG_ID).remove(); | |
| b = document.createElementNS(SVG_NS, 'svg'); | |
| b.setAttribute("class", SVG_ID) | |
| b.setAttribute("id", SVG_ID); | |
| b.setAttribute("width", t.SVG_WIDTH); | |
| b.setAttribute("height", t.SVG_HEIGHT); | |
| a.appendChild(b); | |
| // var mark = document.createElementNS(SVG_NS, 'rect'); | |
| // mark.setAttribute("width", "100px"); | |
| // mark.setAttribute("height", "100px"); | |
| // mark.setAttribute("fill", "red"); | |
| // mark.setAttribute("x", "20px"); | |
| // mark.setAttribute("y", "20px"); | |
| // b.appendChild(mark); | |
| t.mySVGContainer = b; | |
| t.mySVGDocument = b.ownerDocument; | |
| $("#container1").css('width', t.SVG_WIDTH + "px"); | |
| $("#container1").css('height', t.SVG_HEIGHT + "px"); | |
| $("#container2").css('width', t.SVG_WIDTH + "px"); | |
| $("#container2").css('height', t.SVG_HEIGHT + "px"); | |
| /* | |
| $("container4").style.width = t.SVG_WIDTH + "px"; | |
| $("container4").style.height = t.SVG_HEIGHT + "px"; | |
| $("container4").style.display = "none";*/ | |
| }; | |
| /** | |
| * 画线路 | |
| * @param lineData 线路数据 | |
| */ | |
| sp.drawLine = function(lineData) { | |
| var _opacity = typeof(opacity) == 'string' ? opacity : '1'; | |
| var t = this, a, b; | |
| var _lineData = typeof (lineData ) == 'object' ? lineData : t.line; | |
| b = _lineData.length; | |
| if (b <= 0) { | |
| alert("当前城市无地铁线路"); | |
| return; | |
| } | |
| for (var i = 0; i < b; i ++) { | |
| var O = _lineData[i], ps, lineXY = []; | |
| ps = O.points; | |
| for (var j = 0; j < ps.length; j ++) {//画线 | |
| var psO = ps[j], z, y, x, w, v, u, s, r, q, p, o, n, m, l, k, h; | |
| z = psO.id; | |
| x = psO.x; | |
| y = psO.y; | |
| w = psO.rx; | |
| v = psO.ry; | |
| if (j == 0) { | |
| lineXY.push("M" + x + "," + y); | |
| } else { | |
| if (w || v) {//如果是拐角，利用贝塞尔方法 | |
| lineXY.push("Q" + w + "," + v); | |
| lineXY.push(x + "," + y); | |
| } else { | |
| lineXY.push("L" + x + "," + y); | |
| } | |
| } | |
| if (O.loop) {//如果是环线，需要封闭环路 | |
| if (j == (ps.length - 1)) { | |
| l = ps[0].x; | |
| k = ps[0].y; | |
| lineXY.push("L" + l + "," + k); | |
| } | |
| } | |
| } | |
| var shape = t.mySVGDocument.createElementNS(SVG_NS, "path"); | |
| shape.setAttributeNS(null, "d", lineXY.join(" ")); | |
| shape.setAttributeNS(null, "fill", "none"); | |
| shape.setAttributeNS(null, "stroke-width", t.config.LINE_WIDTH); | |
| if (O.inuse) | |
| shape.setAttributeNS(null, "stroke", O.lc); | |
| t.mySVGContainer.appendChild(shape); | |
| var text = t.mySVGDocument.createElementNS(SVG_NS, "text"); | |
| text.setAttributeNS(null, "x", O.lbx + t.config.LINE_NAME_X); | |
| text.setAttributeNS(null, "y", O.lby + t.config.LINE_NAME_Y); | |
| text.setAttributeNS(null, "font-size", t.config.LINE_NAME_SIZE); | |
| text.setAttributeNS(null, "font-family", "宋体"); | |
| if (O.inuse) | |
| text.setAttributeNS(null, "fill", O.lc); | |
| if(O.lb.indexOf("br") >= 0){ | |
| O.lb = O.lb.replace("br", ""); | |
| } | |
| if (O.lb.indexOf("(") > -1) { | |
| O.lb = O.lb.substr(0, O.lb.indexOf("(")); | |
| } | |
| text.textContent = O.lb; | |
| t.mySVGContainer.appendChild(text); | |
| } | |
| }; | |
| /** | |
| * 画站点 | |
| */ | |
| sp.drawStation = function(stateData) { | |
| var t = this, a, b, c, z = document.getElementById("container2"); | |
| var _stateData = typeof(stateData) == 'object' ? stateData : t.station; | |
| b = _stateData.length; | |
| for (var i = 0; i < b; i ++) { | |
| var O = _stateData[i]; | |
| var texts = document.querySelectorAll('text'); | |
| var created = false; | |
| for(var itext in texts){ | |
| if(texts[itext].innerHTML == O.id){ | |
| t.mySVGContainer.appendChild(texts[itext]); | |
| created = true; | |
| break; | |
| } | |
| } | |
| if(!created){ | |
| var text = t.mySVGDocument.createElementNS(SVG_NS, "text"); | |
| text.setAttributeNS(null, "x", O.lx + t.config.STATION_NAME_X); | |
| text.setAttributeNS(null, "y", O.ly + t.config.STATION_NAME_Y); | |
| text.setAttributeNS(null, "font-size", t.config.STATION_NAME_SIZE); | |
| text.setAttributeNS(null, "font-family", "微软雅黑"); | |
| //未启用的站点灰色 | |
| if(O.iu == false){ | |
| text.setAttributeNS(null, "fill", "#b3afaf"); | |
| text.textContent = O.lb; | |
| var unable = t.mySVGDocument.createElementNS(SVG_NS, "text"); | |
| unable.setAttributeNS(null, "x", O.lx + t.config.STATION_NAME_X - 12 * (4 - O.id.length) / 2); | |
| unable.setAttributeNS(null, "y", O.ly + t.config.STATION_NAME_Y * 2); | |
| unable.setAttributeNS(null, "font-size", t.config.STATION_NAME_SIZE); | |
| unable.setAttributeNS(null, "fill", "#b3afaf"); | |
| unable.textContent = '(未启用)'; | |
| t.mySVGContainer.appendChild(unable); | |
| } | |
| else{ | |
| text.setAttributeNS(null, "fill", "black"); | |
| text.textContent = O.lb; | |
| } | |
| t.mySVGContainer.appendChild(text); | |
| } | |
| if (O.iu) {//已启用的站点 | |
| if (O.ex) {//换乘站 | |
| if (transferImgLoaded) {//换乘站图片已经加载 | |
| var pic = t.mySVGDocument.createElementNS(SVG_NS, "image"); | |
| pic.setAttributeNS(null, "x", O.x + t.config.TRANSFERSTATION_X); | |
| pic.setAttributeNS(null, "y", O.y + t.config.TRANSFERSTATION_Y); | |
| pic.setAttributeNS(null, "width", t.config.TRANSFERSTATION_WIDTH); | |
| pic.setAttributeNS(null, "height", t.config.TRANSFERSTATION_HEIGHT); | |
| pic.setAttributeNS("http://www.w3.org/1999/xlink", "href", t.pics.transfer.src); | |
| pic.setAttributeNS(null, "data-id", O.id); | |
| var _this = t; | |
| pic.onclick = function(e) { | |
| // e.stopPropagation(); | |
| if($('#start').val() && $('#end').val()){ | |
| return; | |
| } | |
| _this.showDetail(_this, _this.stationObj[e.target.getAttribute('data-id')]); | |
| }; | |
| t.mySVGContainer.appendChild(pic); | |
| } else {//没有加载 | |
| transferArr.push(O); | |
| t.pics.transfer.onload = function() { | |
| transferImgLoaded = true; | |
| for (var n in transferArr) { | |
| var pic = t.mySVGDocument.createElementNS(SVG_NS, "image"); | |
| pic.setAttributeNS(null, "x", transferArr[n].x + t.config.TRANSFERSTATION_X); | |
| pic.setAttributeNS(null, "y", transferArr[n].y + t.config.TRANSFERSTATION_Y); | |
| pic.setAttributeNS(null, "width", t.config.TRANSFERSTATION_WIDTH); | |
| pic.setAttributeNS(null, "height", t.config.TRANSFERSTATION_HEIGHT); | |
| pic.setAttributeNS("http://www.w3.org/1999/xlink", "href", t.pics.transfer.src); | |
| pic.setAttributeNS(null, "data-id", transferArr[n].id); | |
| var _this = t; | |
| pic.onclick = function(e) { | |
| // e.stopPropagation(); | |
| if($('#start').val() && $('#end').val()){ | |
| return; | |
| } | |
| _this.showDetail(_this, _this.stationObj[e.target.getAttribute('data-id')]); | |
| }; | |
| t.mySVGContainer.appendChild(pic); | |
| } | |
| } | |
| } | |
| var d = t.createDiv(O); | |
| z.appendChild(d); | |
| } else {//普通站点（不包括未启用的站点） | |
| var rect = t.mySVGDocument.createElementNS(SVG_NS, "rect"); | |
| var rectWidth = '26px'; | |
| rect.setAttributeNS(null, "x", parseInt(O.x) - parseInt(rectWidth) / 2 + 'px'); | |
| rect.setAttributeNS(null, "y", parseInt(O.y) - parseInt(rectWidth) / 2 + 'px'); | |
| rect.setAttributeNS(null, "width", rectWidth); | |
| rect.setAttributeNS(null, "height", rectWidth); | |
| rect.setAttributeNS(null, "fill", "#ccc"); | |
| rect.setAttributeNS(null, "fill-opacity", "0"); | |
| rect.setAttributeNS(null, "data-id", O.id); | |
| t.mySVGContainer.appendChild(rect); | |
| // rect.setAttributeNS(null, "stroke", O.lc[0]); | |
| // rect.setAttributeNS(null, "stroke-width", t.config.CIRCLE_LINE_WIDTH); | |
| // rect.setAttributeNS(null, "id", O.id); | |
| var shape = t.mySVGDocument.createElementNS(SVG_NS, "circle"); | |
| shape.setAttributeNS(null, "cx", O.x); | |
| shape.setAttributeNS(null, "cy", O.y); | |
| shape.setAttributeNS(null, "r", t.config.CIRCLE_RADIUS); | |
| shape.setAttributeNS(null, "fill", "white"); | |
| shape.setAttributeNS(null, "stroke", O.lc[0]); | |
| shape.setAttributeNS(null, "stroke-width", t.config.CIRCLE_LINE_WIDTH); | |
| shape.setAttributeNS(null, "id", O.id); | |
| var _this = t; | |
| shape.onclick = function(e) { | |
| // e.stopPropagation(); | |
| if($('#start').val() && $('#end').val()){ | |
| return; | |
| } | |
| _this.showDetail(_this, _this.stationObj[e.target.id]); | |
| }; | |
| t.mySVGContainer.appendChild(shape); | |
| rect.onclick = function(e) { | |
| $('circle[id='+e.target.getAttribute('data-id')+']').trigger('click'); | |
| }; | |
| // var d = t.createDiv(O); | |
| // z.appendChild(d); | |
| } | |
| /* | |
| if (O.id.indexOf("航站楼") >= 0 || O.id.indexOf("机场") >= 0) {//机场画图标 | |
| if (ptImgLoaded) { | |
| var pic = t.mySVGDocument.createElementNS(SVG_NS, "image"); | |
| pic.setAttributeNS(null, "x", Number(O.x) - 15); | |
| pic.setAttributeNS(null, "y", Number(O.y) - 35); | |
| pic.setAttributeNS(null, "width", 24); | |
| pic.setAttributeNS(null, "height", 24); | |
| pic.setAttributeNS("http://www.w3.org/1999/xlink", "href", t.pics.icon_ap.src); | |
| t.mySVGContainer.appendChild(pic); | |
| } else { | |
| ptArr.push(O); | |
| t.pics.icon_ap.onload = function() { | |
| for (var n in ptArr) { | |
| var pic = t.mySVGDocument.createElementNS(SVG_NS, "image"); | |
| pic.setAttributeNS(null, "x", Number(ptArr[n].x) - 15); | |
| pic.setAttributeNS(null, "y", Number(ptArr[n].y) - 35); | |
| pic.setAttributeNS(null, "width", 24); | |
| pic.setAttributeNS(null, "height", 24); | |
| pic.setAttributeNS("http://www.w3.org/1999/xlink", "href", t.pics.icon_ap.src); | |
| t.mySVGContainer.appendChild(pic); | |
| } | |
| } | |
| } | |
| }*/ | |
| } else { | |
| var shape = t.mySVGDocument.createElementNS(SVG_NS, "circle"); | |
| shape.setAttributeNS(null, "cx", O.x); | |
| shape.setAttributeNS(null, "cy", O.y); | |
| shape.setAttributeNS(null, "r", t.config.CIRCLE_RADIUS); | |
| shape.setAttributeNS(null, "fill", "white"); | |
| shape.setAttributeNS(null, "stroke", "gray"); | |
| shape.setAttributeNS(null, "stroke-width", t.config.CIRCLE_LINE_WIDTH); | |
| shape.setAttributeNS(null, "stroke-opacity", '0.5'); | |
| shape.setAttributeNS(null, "id", O.id); | |
| // var _this = t; | |
| // shape.onclick = function(e) { | |
| // // e.stopPropagation(); | |
| // if($('#start').val() && $('#end').val()){ | |
| // return; | |
| // } | |
| // _this.showDetail(_this, _this.stationObj[e.target.id]); | |
| // }; | |
| t.mySVGContainer.appendChild(shape); | |
| } | |
| } | |
| }; | |
| sp.createDiv = function(a) { | |
| var d = cd(), t = this; | |
| if (a.ex) {//换乘站 | |
| d.setAttribute("id", a.id); | |
| d.setAttribute("name", a.id); | |
| d.setAttribute("style", "position: absolute; left:" + (a.x + t.config.TRANSFERSTATION_X) + "px; top:" + (a.y + t.config.TRANSFERSTATION_Y) + "px; width: " + t.config.TRANSFERSTATION_WIDTH + "px; height: " + t.config.TRANSFERSTATION_HEIGHT + "px;"); | |
| t.createClick(d, a); | |
| } else {//非换乘站 | |
| d.setAttribute("id", a.id); | |
| d.setAttribute("name", a.id); | |
| d.setAttribute("style", "position: absolute; left:" + (a.x - 13) + "px; top:" + (a.y - 13) + "px; width: 26px; height: 26px; border: 0px " + a.lc + "solid; background-color: transparent;z-index:100;"); | |
| t.createClick(d, a); | |
| } | |
| return d; | |
| } | |
| /** | |
| * 创建站点点击事件的DIV | |
| * a: 站点svg对象 | |
| * b：站点解析对象 | |
| */ | |
| sp.createClick = function(a, b) { | |
| var t = this; | |
| a.onclick = function(e) { | |
| // e.stopPropagation(); | |
| t.showDetail(this, b); | |
| } | |
| }; | |
| /** | |
| * 显示离你最近的弹出框 | |
| * a: 站点svg对象 | |
| * b: 站点解析对象 | |
| */ | |
| sp.showDetailNear = function(a) { | |
| var left, top, o = document.getElementById("container4"); | |
| left = a.x - 2; | |
| top = a.y; | |
| o.style.top = top + "px"; | |
| o.style.left = left + "px"; | |
| // o.style.display = "block"; | |
| // o.innerText = '离你最近\n' + this.nearStationObject.id; | |
| $('#nearfont').text(this.nearStationObject.id); | |
| }; | |
| /** | |
| * 显示我的位置（最近的站点） | |
| */ | |
| sp.showMyPos = function() { | |
| if(!this.nearStationObject){ | |
| return; | |
| } | |
| var left, top, fo = document.getElementById("nearfont"); | |
| this.nearStation(); | |
| left = this.nearStationObject.x; | |
| top = this.nearStationObject.y; | |
| $('#myPos').show(); | |
| $('#myPos').css('top', (top) + "px"); | |
| $('#myPos').css('left', (left) + "px"); | |
| $('#container4').css('top', (top) + "px"); | |
| $('#container4').css('left', (left) + "px"); | |
| if(!this.mask || this.mask.style.display == 'none'){ | |
| $('#container4').show(); | |
| } | |
| if(!$('#start').val() && !$('#end').val()){ | |
| this.showDetailNear(this.nearStationObject); | |
| } | |
| $('#nearfont').text(this.nearStationObject.id); | |
| //定位点位置 | |
| var c4left = parseInt($('#container4').css('left')); | |
| var c4top = parseInt($('#container4').css('top')); | |
| $('#container4, #myPos').css('transform', 'translate('+ getTransX(c4left, this.scale, $('#container1')[0]) +'px,' + getTransY(c4top, this.scale, $('#container1')[0]) + 'px)'); | |
| }; | |
| /** | |
| * 显示起点 | |
| */ | |
| sp.showStart = function(name, id){ | |
| if(id){ | |
| sendLog("event=sw_start_map&originurltype=" + t + init + '&searchVRuserID='+encodeURIComponent(searchVRuserID)); | |
| } | |
| else{ | |
| sendLog("event=sw_start_input&originurltype=" + t + init + '&searchVRuserID='+encodeURIComponent(searchVRuserID)); | |
| } | |
| if(this.startname == name){ | |
| return; | |
| } | |
| if(!$('#start').val() || !$('#end').val()){ | |
| this.removeMask(); | |
| } | |
| $('#closeBtn').hide(); | |
| $('#linesBtn').show(); | |
| $('#desktopBtn').show(); | |
| var start = getStation(name); | |
| this.startname = name; | |
| this.isDefaultStart = false; | |
| lastInput = name; | |
| if($('#start').val() != name){ | |
| $('#start').val(name); | |
| $('#start').change(); | |
| } | |
| if(name == ''){ | |
| $('#startFlag').hide(); | |
| return; | |
| } | |
| $('#startFlag').css('top', start.y + 'px'); | |
| $('#startFlag').css('left', start.x + 'px'); | |
| if(this.scale){ | |
| $('#startFlag').css('transform', 'translate('+ getTransX(parseInt(start.x), this.scale, $('#container1')[0])+'px,'+ getTransY(parseInt(start.y), this.scale, $('#container1')[0])+'px)'); | |
| } | |
| $('#startFlag').show(); | |
| $('#container3').hide(); | |
| //浏览器版本不显示输入框，因此没有change事件，需直接调用求路 | |
| if(this.startname && this.endname){ | |
| queryRoute(); | |
| } | |
| }; | |
| /** | |
| *显示终点 | |
| */ | |
| sp.showEnd = function(name, id){ | |
| if(id){ | |
| sendLog("event=sw_end_map&originurltype=" + t + init + '&searchVRuserID='+encodeURIComponent(searchVRuserID)); | |
| } | |
| else{ | |
| sendLog("event=sw_end_input&originurltype=" + t + init + '&searchVRuserID='+encodeURIComponent(searchVRuserID)); | |
| } | |
| if(this.endname == name){ | |
| return; | |
| } | |
| if(!$('#start').val() || !$('#end').val()){ | |
| this.removeMask(); | |
| } | |
| $('#closeBtn').hide(); | |
| $('#linesBtn').show(); | |
| $('#desktopBtn').show(); | |
| var end = getStation(name); | |
| this.endname = name; | |
| lastInput = name; | |
| if($('#end').val() != name){ | |
| $('#end').val(name); | |
| $('#end').change(); | |
| } | |
| if(name == ''){ | |
| $('#endFlag').hide(); | |
| return; | |
| } | |
| if(this.scale){ | |
| $('#endFlag').css('transform', 'translate('+ getTransX(parseInt(end.x), this.scale, $('#container1')[0])+'px,'+ getTransY(parseInt(end.y), this.scale, $('#container1')[0])+'px)'); | |
| } | |
| $('#endFlag').css('top', end.y + 'px'); | |
| $('#endFlag').css('left', end.x + 'px'); | |
| $('#endFlag').show(); | |
| $('#container3').hide(); | |
| if(this.startname && this.endname){ | |
| queryRoute(); | |
| } | |
| }; | |
| /** | |
| * 显示站点气泡 | |
| * @param station | |
| * | |
| * @param center 线路的中心点 | |
| */ | |
| sp.showBubble = function(station, info, color){ | |
| //防止重复添加 | |
| if(this.bubbleMap[station.id]){ | |
| this.bubbleMap[station.id].show(); | |
| return; | |
| } | |
| // if($('.bubble[data-id='+station.id+']').length){ | |
| // $('.bubble[data-id='+station.id+']').show(); | |
| // return; | |
| // } | |
| //标志点 | |
| var flag; | |
| if(station.id != this.startname && station.id != this.endname) { | |
| flag = $('<div class="flag trans" data-id="' + station.id + '">' + | |
| '<img src="images/transFlag.png">' + | |
| '<div>转</div>' + | |
| '</div>'); | |
| var left = station.x + 'px'; | |
| var top = station.y + 'px'; | |
| flag.css('top', top); | |
| flag.css('left', left); | |
| var _this = this; | |
| // setTimeout(function(){ | |
| if(_this.scale){ | |
| flag.css('transform', 'translate('+ getTransX(parseInt(left), this.scale, $('#container1')[0])+'px,'+ getTransY(parseInt(top), this.scale, $('#container1')[0])+'px)'); | |
| } | |
| $('.container').append(flag); | |
| // }, 10); | |
| } | |
| //气泡 | |
| if(station.id == this.endname){ | |
| return; | |
| } | |
| var bubble = $(' <div class="bubble " data-id="' + station.id + '">' + | |
| '<img src="images/bubble.png">'+ | |
| '<div>' + | |
| '<span class="name">'+station.id+'</span>'+ | |
| '<span class="lineName" style="background-color: '+ color +'">'+info.linename.replace('地铁', '').replace(/\(.*\)/, '')+'</span>'+ | |
| '<div class="info">'+info.direct+'方向 ' + info.passstopnum + '站</div>'+ | |
| '</div>' + | |
| '</div>'); | |
| this.bubbleMap[station.id] = bubble; | |
| var bleft = station.x + 'px'; | |
| var btop = station.y + 'px'; | |
| bubble.css('top', btop); | |
| bubble.css('left', bleft); | |
| var _this = this; | |
| // setTimeout(function(){//不加setTimeout有报错 | |
| if(_this.scale){ | |
| // bubble.css('transform', 'translate('+ parseInt(left)*(this.scale - 1.0)+'px,'+ ((parseInt(top) + this.config.BUBBLE_OFFSET_Y)*(this.scale - 1.0))+'px)'); | |
| bubble.css('transform', 'translate('+ getTransX(parseInt(bleft), _this.scale, $('#container1')[0])+'px,'+ (getTransY(parseInt(btop), _this.scale, $('#container1')[0]) - parseFloat($('html').css('font-size'))*this.config.BUBBLE_HEIGHT)+'px)'); | |
| } | |
| $('.container').append(bubble); | |
| setDirection(station.id); | |
| // }, 10); | |
| } | |
| /** | |
| * 定位选中站点 | |
| * @param top | |
| * @param left | |
| */ | |
| sp.focus = function(x, y){ | |
| $('#container').scrollTo({ | |
| // toT: top*(this.scale || 1) - window.innerHeight / 2 - 60, | |
| // toL: left*(this.scale || 1)- window.innerWidth / 2, | |
| toT: y + getTransY(y, this.scale || 1, $('#container1')[0]) - window.innerHeight / 2 - 60, | |
| toL: x + getTransX(x, this.scale || 1, $('#container1')[0])- window.innerWidth / 2, | |
| durTime : 200, //过渡动画时间 | |
| // delay : 30, | |
| }); | |
| } | |
| /** | |
| * 显示popwin弹出框 | |
| * a: 站点svg对象 | |
| * b: 站点解析对象 | |
| */ | |
| sp.showDetail = function(a, aa) { | |
| if(aa.id == this.startname || aa.id == this.endname){ | |
| return; | |
| } | |
| var t = this, b, c, d, f = [], mb = document.getElementById("msgbox"); | |
| b = t.station; | |
| c = b.length; | |
| if (c <= 0) return; | |
| d = aa.id; | |
| // if (d == lastPoiId) { | |
| // return; | |
| // } | |
| $("#container3").css('display', "none"); | |
| $("#container3").css('zIndex', 0); | |
| //隐藏"离你最近"的提示 | |
| // $("#container4").css('display', "none"); | |
| $("#container4").css('zIndex', 0); | |
| mb.innerHTML = ""; | |
| lastPoiId = d; | |
| var left, top; | |
| if (!a.GPS) { | |
| if (!aa.ex) { | |
| left = parseFloat(aa.x); | |
| top = parseFloat(aa.y); | |
| // left = parseFloat(a.getBBox().x - a.getBBox().width / 2); | |
| // top = parseFloat(a.getBBox().y + a.getBBox().height / 2); | |
| } else { | |
| left = parseFloat(aa.x); | |
| top = parseFloat(aa.y); | |
| } | |
| } else { | |
| left = a.x; | |
| top = a.y; | |
| } | |
| this.focus(left, top); | |
| // $('#container').animate({scrollTop: top - window.innerHeight / 2 - 60 + 'px', scrollTop: left - window.innerWidth / 2+ 'px'}, 800); | |
| for (var i = 0; i < c; i ++) { | |
| var O = b[i], z, y, lns, p_t, p_tc, p_tn, p_lc; | |
| z = O.id; | |
| if (d == z) {//找到站点名 | |
| lns = O.lns; | |
| y = lns.length; | |
| if (y <= 0) { | |
| return; | |
| } | |
| p_t = cd(); | |
| p_t.className = "top"; | |
| // mb.appendChild(p_t); | |
| p_tc = cd(t_c); | |
| p_tc.className = "title_container"; | |
| mb.appendChild(p_tc); | |
| p_tn = cd(); | |
| p_tn.className = "title_name floatcss"; | |
| p_tn.innerHTML = O.lb; | |
| p_tc.appendChild(p_tn); | |
| //“离你最近”文字 | |
| if(this.nearStationObject && aa.id == this.nearStationObject.id){ | |
| var div_nearest = cd(); | |
| div_nearest.style.verticalAlign = 'bottom'; | |
| div_nearest.style.color = '#ed5026'; | |
| div_nearest.style.lineHeight = '23px'; | |
| div_nearest.style.float = 'left'; | |
| div_nearest.style.paddingLeft = '4px'; | |
| div_nearest.innerHTML = ' 离你最近'; | |
| p_tc.appendChild(div_nearest); | |
| } | |
| p_lc = cd(); | |
| p_lc.className = "line_container"; | |
| mb.appendChild(p_lc); | |
| for (var j = 0; j < y; j ++) { | |
| var ln = lns[j], x, w, v, g, p_ln; | |
| if (ln.id.indexOf("(") > 0) | |
| ln.id = ln.id.substr(0, ln.id.indexOf("(")); | |
| p_ln = cd(); | |
| p_ln.className = "line_div floatcss"; | |
| p_ln.setAttribute("lc", O.lc[j]); | |
| p_ln.setAttribute("ch", O.lc[j] + "_" + ln.id); | |
| p_ln.innerHTML = ln.id; | |
| if (j == 0) { | |
| p_ln.style.backgroundColor = O.lc[j]; | |
| p_ln.style.color = "#ffffff"; | |
| p_ln.style.fontWeight = "bold"; | |
| p_lc.style.borderBottom = "2px solid" + O.lc[j]; | |
| tempLinePanel = p_ln; | |
| } else { | |
| p_ln.className += " margincss"; | |
| } | |
| p_lc.appendChild(p_ln); | |
| x = ln.fx; | |
| w = x.length; | |
| if (w <= 0) { | |
| mb.innerHTML = ""; | |
| return; | |
| } | |
| v = cd(); | |
| v.style.marginTop = "15px"; | |
| v.id = O.lc[j] + "_" + ln.id; | |
| mb.appendChild(v); | |
| if (j > 0) { | |
| v.style.display = "none"; | |
| } else { | |
| v.style.display = "block"; | |
| tempDetailPanel = v; | |
| } | |
| for (var k = 0; k < w; k ++) { | |
| var fx = x[k], u, s, r, q, p, o, n, m, h; | |
| u = cd(); | |
| u.className = "detail_container"; | |
| if (k > 0) { | |
| u.style.marginTop = "15px"; | |
| } | |
| v.appendChild(u); | |
| s = cd(); | |
| s.className = "floatcss detail_fangxiang"; | |
| s.innerHTML = fx.name + "方向"; | |
| u.appendChild(s); | |
| r = fx.ei.split(","); | |
| if (r.length > 1) {//多个末班，第一个是全程 | |
| q = fx.et; | |
| p = q.split(","); | |
| for (var l = 0; l < p.length; l ++) { | |
| if (l == 0) { | |
| t.appendFirstDetail(fx, u, p[l]); | |
| } else { | |
| o = cd(); | |
| o.className = "detail_qj_container"; | |
| o.style.verticalAlign = "middle"; | |
| v.appendChild(o); | |
| n = cd(); | |
| n.className = "floatcss detail_circle"; | |
| o.appendChild(n); | |
| m = cd(); | |
| m.className = "floatcss"; | |
| m.style.color = "#999999"; | |
| m.style.marginLeft = "7px"; | |
| m.innerHTML = "往" + r[l]; | |
| o.appendChild(m); | |
| h = cd(); | |
| h.className = "floatcss2"; | |
| h.style.color = "#999999"; | |
| h.innerHTML = p[l]; | |
| o.appendChild(h); | |
| } | |
| } | |
| } else { | |
| t.appendFirstDetail(fx, u); | |
| } | |
| } | |
| g = cd(); | |
| g.style.height = "10px"; | |
| g.style.width = "100%"; | |
| v.appendChild(g); | |
| //横线 | |
| var split = cd(); | |
| split.style.height = '1px'; | |
| split.style.width = '106%'; | |
| split.style.marginLeft = '-10px'; | |
| split.style.backgroundColor = '#cccccc'; | |
| v.appendChild(split); | |
| //设为起点、设为终点 | |
| var opGroup = cd(); | |
| opGroup.style.textAlign = 'center'; | |
| opGroup.style.marginTop = '0.28rem'; | |
| v.appendChild(opGroup); | |
| //起点 | |
| var setStartBtn = cd(); | |
| setStartBtn.innerText = '设为起点'; | |
| setStartBtn.style.fontSize = '0.4rem'; | |
| setStartBtn.style.color = '#067ffa'; | |
| setStartBtn.style.height = '25px'; | |
| setStartBtn.style.width = '40%'; | |
| setStartBtn.style.display = 'inline-block'; | |
| setStartBtn.style.textAlign = 'left'; | |
| setStartBtn.onclick = t.showStart.bind(this, aa.id); | |
| //竖分隔线 | |
| var line = cd(); | |
| line.style.width = '1px'; | |
| line.style.height = '30px'; | |
| line.style.display = 'inline-block'; | |
| line.style.backgroundColor = '#cccccc'; | |
| line.style.verticalAlign = 'middle'; | |
| line.style.marginLeft = '0px'; | |
| //终点 | |
| var setEndBtn = cd(); | |
| setEndBtn.innerText = '设为终点'; | |
| setEndBtn.style.fontSize = '0.4rem'; | |
| setEndBtn.style.color = '#067ffa'; | |
| setEndBtn.style.display = 'inline-block'; | |
| setStartBtn.style.height = '25px'; | |
| setEndBtn.style.textAlign = 'right'; | |
| setEndBtn.style.width = '42%'; | |
| opGroup.appendChild(setStartBtn); | |
| opGroup.appendChild(line); | |
| opGroup.appendChild(setEndBtn); | |
| setEndBtn.onclick = t.showEnd.bind(this, aa.id); | |
| if (y != 1) {// | |
| p_ln.onclick = function (e) { | |
| e.stopPropagation(); | |
| tempLinePanel.style.backgroundColor = "#e8edf2"; | |
| tempLinePanel.style.color = "#999999"; | |
| tempLinePanel.style.fontWeight = ""; | |
| var lc = this.getAttribute("lc"); | |
| this.style.backgroundColor = lc; | |
| this.style.color = "#ffffff"; | |
| this.style.fontWeight = "bold"; | |
| this.parentElement.style.borderBottom = "2px solid" + lc; | |
| tempLinePanel = this; | |
| var ch = this.getAttribute("ch"); | |
| var dp = document.getElementById(ch); | |
| window.setTimeout( | |
| function () { | |
| tempDetailPanel.style.display = "none"; | |
| dp.style.display = "block"; | |
| tempDetailPanel = dp; | |
| t.setBoxPos("container3", left, top); | |
| }, 100 | |
| ); | |
| } | |
| } | |
| } | |
| if (t.nearStationObject) {//若是点击了附近地铁 则需要显示附近地铁的标识 | |
| if (a.GPS || (d == t.nearStationObject.id)) { | |
| t.displayNearStation(); | |
| } | |
| } | |
| break; | |
| } | |
| } | |
| window.setTimeout( | |
| function () { | |
| document.getElementById("container3").style.display = "block"; | |
| document.getElementById("container3").style.zIndex = 200; | |
| $("container3").onclick = function(e) { | |
| e.stopPropagation(); | |
| } | |
| //$("container4").style.zIndex = 150; | |
| //$("container4").style.display = "block"; | |
| t.setBoxPos("container3", left, top); | |
| }, 200 | |
| ); | |
| }; | |
| /** | |
| * 弹出框画全程 | |
| */ | |
| sp.appendFirstDetail = function(fx, u, et) { | |
| var t = this, q, p, o, n, m, l; | |
| q = cd(); | |
| q.className = "floatcss detail_kuohao"; | |
| q.innerHTML = "(全程)"; | |
| u.appendChild(q); | |
| p = cd(); | |
| p.className = "floatcss2"; | |
| p.style.fontSize = "13px"; | |
| u.appendChild(p); | |
| o = cd(); | |
| if (fx.msg) { | |
| o.className = "floatcss detail_se"; | |
| o.innerHTML = fx.msg; | |
| p.appendChild(o); | |
| return; | |
| } | |
| o.className = "floatcss detail_sebg"; | |
| o.style.backgroundColor = "#74bf4c"; | |
| o.innerHTML = "始"; | |
| p.appendChild(o); | |
| n = cd(); | |
| n.className = "floatcss detail_se"; | |
| n.innerHTML = fx.st; | |
| p.appendChild(n); | |
| m = cd(); | |
| m.className = "floatcss detail_sebg"; | |
| m.style.backgroundColor = "#e6325c"; | |
| m.style.marginLeft = "12px"; | |
| m.verticalAlign = "middle"; | |
| m.innerHTML = "末"; | |
| p.appendChild(m); | |
| l = cd(); | |
| l.className = "floatcss detail_se"; | |
| if (!et) | |
| l.innerHTML = fx.et; | |
| else | |
| l.innerHTML = et; | |
| p.appendChild(l); | |
| }; | |
| /** | |
| * 显示最近地铁标识 | |
| */ | |
| sp.displayNearStation = function() { | |
| var t = this, a = $(t_c), b, c, d, e; | |
| b = cd(); | |
| b.className = "floatcss"; | |
| // a.appendChild(b); | |
| c = cd(); | |
| c.className = "title_ov floatcss"; | |
| // b.appendChild(c); | |
| d = cd(); | |
| // d.className = "title_near floatcss"; | |
| // $('#container4').html( "离你最近" ); | |
| // b.appendChild(d); | |
| }; | |
| /** | |
| * 设置popwin弹出位置 | |
| */ | |
| sp.setBoxPos = function(element, left, top) { | |
| var a = document.getElementById(element).offsetHeight; | |
| document.getElementById("ov").style.display = "block"; | |
| if (parseInt(left) > 200) { | |
| document.getElementById("ov").style.left = "50%"; | |
| document.getElementById(element).style.left = (parseInt(left)) + "px"; | |
| document.getElementById(element).style.marginLeft = '-148px'; | |
| document.getElementById(element).style.top = (parseInt(top)) + "px"; | |
| document.getElementById(element).style.marginTop = -a + 'px'; | |
| } else { | |
| document.getElementById("ov").style.left = "15px"; | |
| document.getElementById(element).style.left = (parseInt(left) - 17) + "px"; | |
| document.getElementById(element).style.top = (parseInt(top) - a) + "px" | |
| } | |
| if(this.scale){ | |
| // document.getElementById(element).style.transform = 'translate('+ left*(this.scale - 1.0)+'px,'+top*(this.scale - 1.0)+'px)'; | |
| document.getElementById(element).style.transform = 'translate('+ getTransX(left, this.scale, $('#container1')[0])+'px,'+ getTransY(top, this.scale, $('#container1')[0])+'px)'; | |
| } | |
| }; | |
| /** | |
| * 显示气泡、flag | |
| */ | |
| sp.drawBubbles = function() { | |
| for(var bi in sw.bubbleInfo){ | |
| sw.showBubble(sw.bubbleInfo[bi].station, sw.bubbleInfo[bi].info, sw.bubbleInfo[bi].color); | |
| } | |
| //让气泡显示在flag上面 | |
| $('.bubble').forEach(function(item){ | |
| $('.container').append($(item)); | |
| }); | |
| } | |
| /** | |
| * 设置viewport，用于显示和缩放 | |
| */ | |
| sp.setViewport = function(a, b, c) { | |
| var d = document.querySelector("meta[name=viewport]"), e = ""; | |
| if (c) { | |
| e = ",initial-scale=" + c; | |
| } else { | |
| e = ",initial-scale=0.8"; | |
| } | |
| d.setAttribute("content", "width=device-width,minimum-scale=" + a + ",maximum-scale=" + b + e + ",user-scalable=yes"); | |
| }; | |
| /** | |
| * 设置加载后 页面滚动的位置 | |
| */ | |
| sp.scrollWindow = function(a, b) { | |
| document.getElementById("container").scrollTop=a; | |
| document.getElementById("container").scrollLeft=b; | |
| //window.scrollTo(a, b); | |
| }; | |
| //为zepto添加scroll动画 | |
| $.fn.scrollTo =function(options){ | |
| var defaults = { | |
| toT : 0, //滚动目标位置 | |
| toL : 0, | |
| durTime : 500, //过渡动画时间 | |
| delay : 30, //定时器时间 | |
| callback:null //回调函数 | |
| }; | |
| var opts = $.extend(defaults,options), | |
| timer = null, | |
| _this = this, | |
| curTop = _this.scrollTop(),//滚动条当前的位置 | |
| curLeft = _this.scrollLeft(), | |
| subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 | |
| subLeft = opts.toL - curLeft, | |
| delta = Math.max(subTop, subLeft), | |
| index = 0, | |
| dur = Math.round(opts.durTime / opts.delay), | |
| smoothScroll = function(t, l){ | |
| index++; | |
| var perx = Math.round(subLeft/dur); | |
| var pery = Math.round(subTop/dur); | |
| if(index >= dur){ | |
| _this.scrollTop(t); | |
| _this.scrollLeft(l); | |
| window.clearInterval(timer); | |
| if(opts.callback && typeof opts.callback == 'function'){ | |
| opts.callback(); | |
| } | |
| return; | |
| }else{ | |
| _this.scrollTop(curTop + index*pery); | |
| _this.scrollLeft(curLeft + index*perx); | |
| } | |
| }; | |
| timer = window.setInterval(function(){ | |
| smoothScroll(opts.toT, opts.toL); | |
| }, opts.delay); | |
| return _this; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment