百度地图开发 InfoBox 弹出消息框使用详解！某物流网应用

 

InfoBox 这个东西是开源的插件 比自带的消息框好使多了。但是也有点问题就是使用上要注意 只能弹出一次、核心就是赋值改变参数、

<script type="text/javascript" src="/statics/js/InfoBox.js"></script>

这个东西是基础。然后上核心代码： 物流网

//建筑物 展示 infobox 开始
                     var html = ['<div class="tck_title" id="tck_title">',
                        '<div id="mc" class="title_zi">帝国大厦</div>',
                        '<div class="tck_neirong">',
                            '<div class="nr_1">',
                                '<div class="nr_top">',
                                    '<div class="ne_top_l"><img onclick="xuanze_suoluetu(1);" src="img_vv/nopic.png" id="tc_pic"/></div>',
                                    '<div class="ne_top_r">',

                                        '<div class="r_dizhi" id="address">地址：潍坊市世纪泰华</div>',
                                        '<div class="r_weizi">',
                                            '<ul>',//tqy20121117
                                                '<li><img src="img_vv/pic_5.png" />&nbsp;<a href="javascript:xuanze_suoluetu(1);">相关图片</a></li>',
                                                '<li><img src="img_vv/pic_6.png" />&nbsp;<a href="javascript:xuanze_suoluetu(2);">相关视频</a></li>',
                                                '<li><img src="img_vv/pic_7.png" />&nbsp;<a href="javascript:xuanze_suoluetu(3);">全景导览</a></li>',
                                                '<li><img src="img_vv/pic_8.png" />&nbsp;<a href="javascript:xuanze_suoluetu(4);">虚拟现实</a></li>',
                                            '</ul>',
                                        '</div>',
                                    '</div>',
                                '</div>',
                                '<div id="tc_content" class="nr_middle">',
                                '</div>',
                                '<div class="nr_down" id="tc_pages">',
                                '</div>',
                            '</div>'];

                    var infoBox = new BMapLib.InfoBox(map,html.join(""),{
                    offset:{height:-251,width:1},
                    boxStyle:{
                        background:"url('img_vv/tanchukuang.png') no-repeat",
                        width: "356px",
                        height: "400px" 
                    },
                    boxClass:"infobox",
                    closeIconMargin: "5px 8px 0 0",
                    closeIconUrl: "img_vv/close.png",
                    enableAutoPan: true,
                    align: INFOBOX_AT_TOP
                    });
                    
                //建筑物 展示 infobox 结束