Demo entry 5532771

javascript

Use this style:   manni igor lovelace xcode vim autumn abap vs rrt native perldoc borland arduino tango emacs friendly monokai paraiso-dark colorful murphy bw pastie rainbow_dash algol_nu paraiso-light trac default algol fruity  

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.

Delete this entry (admin only).