关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法

转摘：http://blog.csdn.net/guo_love_peng/article/details/8674230

今天遇到这个问题了。后面再网上搜搜，发现都是你抄我，我转载你的，后来无意看到一篇文章，说是用闭包后来解决了。现在把问题解决方法发出来

function baiduMapFunction(divId, hotelArray) {  
    var map = new BMap.Map(divId);// 创建百度地图对象  
  
  
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);  
  
  
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小，默认禁用  
    map.enableContinuousZoom(); // 启用地图惯性拖拽，默认禁用  
    map.addControl(new BMap.NavigationControl()); // 添加默认缩放平移控件,左上角  
    map.addControl(new BMap.ScaleControl()); // 添加默认比例尺控件  
    map.addControl(new BMap.MapTypeControl({  
        anchor : BMAP_ANCHOR_TOP_RIGHT  
    })); // 左上角，默认地图控件  
    for ( var o in hotelArray) {  
        var point = new BMap.Point(hotelArray[o].lng, hotelArray[o].lat);// 坐标点  
  
  
        var hotelNameLabel = new BMap.Label(hotelArray[o].hotelName, {  
            offset : new BMap.Size(20, -10)  
        });// 标注显示名称  
  
  
        var sContent = "<div>"  
                + "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"  
                + hotelArray[o].hotelName  
                + "</h4>"  
                + "<img style='float:right;margin:4px' id='imgDemo' src='../images/"  
                + hotelArray[o].srcImage  
                + "' width='139' height='104' title=''/>"  
                + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"  
                + hotelArray[o].hotelAddress + "</p>" + "</div>";  
  
  
        // 设置label 文本框的样式  
        hotelNameLabel.setStyle({  
            "borderColor" : "red",  
            "color" : "red",  
            "cursor" : "pointer"  
  
  
        });  
        console.log(hotelArray[o].srcImage + sContent);  
        createMark = function(lng, lat, info_html) {  
            var _marker = new BMap.Marker(new BMap.Point(lng, lat));  
            _marker.addEventListener("click", function(e) {  
                this.openInfoWindow(new BMap.InfoWindow(info_html));  
            });  
            _marker.addEventListener("mouseover", function(e) {  
                this.setTitle("位于: " + lng + "," + lat);  
            });  
            return _marker;  
        };  
  
  
        var marker = createMark(hotelArray[o].lng, hotelArray[o].lat, sContent);  
  
  
        map.addOverlay(marker);  
        marker.setLabel(hotelNameLabel); // 添加百度label  
  
  
    }  
    city = new BMap.LocalSearch(map, {  
        renderOptions : {  
            map : map,  
            autoViewport : true  
        }  
    }); // 地图显示到查询结果处  
}  
  
  
function searchCity() {  
    var s = $("#searchValue").val();  
    console.log(s);  
    city.search(s); // 查找城市  
}  

上面这个函数，就接受一个json数组对象，和一个在你页面的divId。因为要显示地图

 

先把地图初始化之后，在循环里面一次从json中读取数据，然后new 出标注对象。再为每个标注对象添加监听方法

在添加监听方法的时候，会遇到，不管点击哪一个标注，都是输出最后一条的信息。

这主要是作用域的问题，之后写了个闭包的方法。

如下

var     createMark = function(lng, lat, info_html) {  
            var _marker = new BMap.Marker(new BMap.Point(lng, lat));  
            _marker.addEventListener("click", function(e) {  
                this.openInfoWindow(new BMap.InfoWindow(info_html));  
            });  
            _marker.addEventListener("mouseover", function(e) {  
                this.setTitle("位于: " + lng + "," + lat);  
            });  
            return _marker;  
        }; 

将经纬度，和显示信息单独放在函数里，new标注之后，立刻加监听。

 

这样之后就解决了这个问题了