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

2019独角兽企业重金招聘Python工程师标准>>>

                    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>

转载于:https://my.oschina.net/chuibilong/blog/703255