Demo entry 5532771
javascript
Submitted by anonymous
on Jun 30, 2016 at 07:06
Language: JavaScript. Code size: 4.8 kB.
//存储国家名称 var hostnames = ["法国", "西班牙", "意大利", "比利时", "南斯拉夫", "意大利", "法国", "联邦德国", "瑞典", "英格兰", "荷兰", "比利时", "葡萄牙", "奥地利", "瑞士", "波兰", "乌克兰", "法国"]; //存储对应国家的首都点 var hostpoints = [France, Spain, Italy, Belgium, Yugoslavia, Italy, France, Westgermany, Sweden, England, Netherlands, Belgium2, Portugal, Austria, Switzerland, Poland, Ukraine, France]; var linepoints = [];//存储首都点 var curves = [];//存储弧线 var timer;//计时器 //自定义主办国覆盖物 function hostCustomOverlay(date, point, country, img) { this._point = point; this._text = country; this._img = img; this._date = date; } hostCustomOverlay.prototype = new BMap.Overlay(); hostCustomOverlay.prototype.initialize = function (map) { this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = "rgb(8,48,74)"; div.style.color = "white"; div.style.height = "25px"; div.style.lineHeight = "25px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontFamily = "新宋体"; div.style.padding = "0 5px 0 5px"; div.style.border = "solid 3px rgb(237,45,45)" var img = document.createElement("img"); img.src = this._img; img.style.verticalAlign = "middle"; img.style.width = "16px"; img.style.height = "16px"; img.style.marginRight = "8px"; div.appendChild(img); var span = document.createElement("span"); span.appendChild(document.createTextNode(this._text)); span.style.fontSize = "16px"; span.style.display = "inline-block"; span.style.height = "100%"; span.style.verticalAlign = "middle"; span.style.marginRight = "3px"; div.appendChild(span); var span2 = document.createElement("span"); span2.appendChild(document.createTextNode(this._date)); span2.style.fontSize = "16px"; span2.style.display = "inline-block"; span2.style.height = "100%"; span2.style.fontFamily = "新宋体"; span2.style.verticalAlign = "middle"; div.appendChild(span2); var arrow = this._arrow = document.createElement("div"); arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "24px"; arrow.style.left = "55px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); map.getPanes().labelPane.appendChild(div); return div; }; hostCustomOverlay.prototype.draw = function () { var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px"; this._div.style.top = pixel.y - 42 + "px"; }; //jquery 绑定click事件 $("#host").click(function () { curves=[];//清空弧线 linepoints=[];//清空点 clearInterval(timer);//清除计时器 var date = 1956;//初始化时间 var markers = [];//存储marker var infowins = [];//存储信息提示窗口 var j = 0; map.clearOverlays();//清除覆盖物 // for (var i = 0; i < hostpoints.length; i++) { if (i != hostpoints.length - 1) { var linepoint = [hostpoints[i], hostpoints[i + 1]]; linepoints.push(linepoint); } map.centerAndZoom(new BMap.Point(2.861033, 47.965036), 6); var marker = new BMap.Marker(hostpoints[i]); // 创建标注 markers.push(marker);// 存储标注 var name = hostnames[i];//获取对应国家名称 var imgname = "./image/" + name + ".png";//获取对应国旗图片 //比利时第二次、瑞士、乌克兰都是联合举办国,时间不增加 if (hostpoints[i] == Belgium2 || name == "瑞士" || name == "乌克兰") { } else { date += 4; } //创建首都提示框 cityCompOverlay = new hostCustomOverlay(date, hostpoints[i], name, imgname); infowins.push(cityCompOverlay);//存储提示框 } //创建弧线并存储 for (var k = 0; k < linepoints.length; k++) { var curve = new BMapLib.CurveLine(linepoints[k], {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5}); curves.push(curve); } //设置定时器,单个展示历届主办国 timer = setInterval(function () { if (j < markers.length) { if (j > 0) { markers[j - 1].hide(); infowins[j - 1].hide(); } map.addOverlay(markers[j]);// 将标注添加到地图中 map.addOverlay(infowins[j]); map.panTo(hostpoints[j]);//漫游至首都 j = j + 1; if(j>=2) { map.addOverlay(curves[j-2]); //添加弧线到地图中 } } else { map.centerAndZoom(new BMap.Point(2.861033, 51.5), 5); clearInterval(timer); } }, 1500);//间隔1.5秒 });
This snippet took 0.02 seconds to highlight.
Back to the Entry List or Home.