关于for循环始终显示最大值问题

Question

稍微了解了下，好像是闭包添加的问题，但尝试了好几种方法，没有能够成功保存每次循环的i值，有大神能告诉我下，应该怎么封装使返回函数中能获取到每个i值

    function translateCallback(point) {
    function SquareOverlay(center, length,height, Bimg){
        this._center = center;
        this._length = length;
        this._height = height;
        this._backgroundImg = Bimg;
    }
    // 继承API的BMap.Overlay
    SquareOverlay.prototype = new BMap.Overlay();
    // 实现初始化方法
    SquareOverlay.prototype.initialize = function(map){
        // 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var div = document.createElement("div");
        div.innerHTML="<div class='bike-num'>"+4+"</div>";
        div.style.position = "absolute";
        // 可以根据参数设置元素外观
        div.style.width = this._length + "px";
        div.style.height = this._height + "px";
        div.style.background = this._backgroundImg;
        // 将div添加到覆盖物容器中
        map.getPanes().markerPane.appendChild(div);
        // 保存div实例
        this._div = div;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;

    };
    // 实现绘制方法
    SquareOverlay.prototype.draw = function(){
        // 根据地理坐标转换为像素坐标，并设置给容器
        var position = this._map.pointToOverlayPixel(this._center);
        this._div.style.left = position.x - this._length / 2 + "px";
        this._div.style.top = position.y - this._length / 2 + "px";
    };
    SquareOverlay.prototype.addEventListener = function(event,fun){
        this._div['on'+event] = fun;
    }
    // 添加自定义覆盖物
    var mySquare = new SquareOverlay(point, 28, 35, "url('tp/map-logo.png')no-repeat -28px -87px");
    bm.addOverlay(mySquare);
    //

    mySquare.addEventListener("click", function(e){
        bm.addEventListener('click',fo(e));         //给地图绑定点击事件            //给地图绑定点击事件
    });
    //叠加层点击事件
    function fo(e){
        var mContent="<iframe src='infoWindow.html' height='200px' width='300px' frameborder='0'></iframe>";
        //var sContent = "<div style='width: 300px;position: relative;overflow: hidden' class='clearfix'> <ul class='info clearfix'> <li> <div class='infoWindow'> <div class='info-title'> <i class='fa fa-bicycle' style='margin:0 10px;height: 40px;width: 40px;color: green'></i> <span>NO.0000000001</span> </div> <div class='info-content'> <ul class='info-width'> <li class='info-inner'> <i style='margin-right:36px'><img src='tp/heart.png'></i> <i style='margin-right:36px'><img src='tp/social-bike.png'></i> <i><img src='tp/bell.png'></i> </li> </ul> </div> <div class='info-foot'> <input type='button' class='btn' value='车辆管理' style='margin-right: 10px;width: 80px;height: 30px;padding: 0;background-color: #fff'> <input type='button' class='btn' value='预警处理' style='margin-right: 10px;width: 80px;height: 30px;padding: 0;background-color: #fff'> <input type='button' class='btn' value='关闭' style='width: 80px;height: 30px;padding: 0;background-color: #fff'> </div> </div> </li> <li> <div class='infoWindow'> <div class='info-title'> <i class='fa fa-bicycle' style='margin:0 10px;height: 40px;width: 40px;color: green'></i> <span>NO.0000000002</span> </div> <div class='info-content'> <ul class='info-width'> <li class='info-inner'> <i style='margin-right:36px'><img src='tp/heart.png'></i> <i style='margin-right:36px'><img src='tp/social-bike.png'></i> <i><img src='tp/bell.png'></i> </li> </ul> </div> <div class='info-foot'> <input type='button' class='btn' value='车辆管理' style='margin-right: 10px'> <input type='button' class='btn' value='预警处理' style='margin-right: 10px'> <input type='button' class='btn' value='关闭'> </div> </div> </li> </ul> <div class='left-btn' style='position: absolute;left: 0;top: 40%'><img src='tp/l-arrow.png'></div> <div class='right-btn' style='position: absolute;right: 0;top: 40%'><img src='tp/r-arrow.png'></div> </div>";
        infoWindow = new BMap.InfoWindow(mContent);  // 创建信息窗口对象
        bm.openInfoWindow(infoWindow,point); //开启信息窗口
        bm.removeEventListener('click', fo); //这里取消绑定。
    }
    }
//
var bm = new BMap.Map("allmap");
var center= new BMap.Point('117.125575995835','36.6702207308909');
bm.centerAndZoom(center, 15);
bm.addControl(new BMap.NavigationControl());
//GPS坐标
var xx = ['117.129575995835','117.121575995835','117.125575995835','117.113575995835'];
var yy = ['36.6702207308909','36.6702207234109','36.6703247308909','36.6702102348909'];
var nn= ['1','2','3','4'];
//地图初始化
for(i=0;i<xx.length;i++) {
    var gpsPoint = new BMap.Point(xx[i], yy[i]);
    //alert(i)
    //坐标转换完之后的回调函数
    BMap.Convertor.translate(gpsPoint,0,translateCallback);   //真实经纬度转成百度坐标

}

Answer 1

包一层自执行函数

for(var i = 0; i < 10; i++){
  setTimeout(function(){
    console.info(i);
  });
}

// 全输出 10

for(var i = 0; i < 10; i++){
  (function(index){
    setTimeout(function(){
      console.info(index);
    });
  })(i);
}
// 正常输出 i 的值