数据展示 带点击弹框小实例

map.clearOverlays();
var pts = [];
for (var i = 0; i < data.length; i++) {
var pt = new BMap.Point(data[i].lng,data[i].lat);

var myIcon = null;
if (data[i].dataType == "JCD" || data[i].dataType == "ZDJCD") {
myIcon = new BMap.Icon("image/monitoring.png",
new BMap.Size(24, 24));

}
if (data[i].dataType == "SXT") {
myIcon = new BMap.Icon("image/camera.png",
new BMap.Size(24, 24));

}

var marker2 = new BMap.Marker(pt, {
icon : myIcon
});
var msg = "";
if (data[i].dataType != "HT" ) {

msg = "所在高速：" +data[i].highwayName + " <br>" +
"桩号：" +data[i].stake + " <br>" ;
} else {
msg ='';
}
map.addOverlay(marker2); // 将标注添加到地图中
addInfo(msg,marker2);
pts.push(pt);

}
// 自适应比例尺，调整视角
map.setViewport(pts);

// 重点 这里如果不这样写，会造成只显示最后一个点的信息

function addInfo(txt,marker){　
　　var infoWindow = new BMap.InfoWindow(txt);　
　　marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});　
　}　

// 相对自适应布局

<style type="text/css">
html {
height: 100%;
}

body {
height: 100%;
}

* {
margin: 0;
padding: 0;
}

.box {
height: 100%;

}

.bottom {

height: 40px;
}

.main {
height: calc(100% - 40px);
}
</style>