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

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 + "
" +

"桩号：" +data[i].stake + "
" ;

} 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);

});

}

// 相对自适应布局

html {

height: 100%;

}

body {

height: 100%;

}

* {

margin: 0;

padding: 0;

}

.box {

height: 100%;

}

.bottom {

height: 40px;

}

.main {     height: calc(100% - 40px); }