百度地图 javascript api自定义信息窗口

百度 js api中存在infoWindow的类，就是marker 点击后显示的信息窗口，

他存在一下问题

1.在map中只能显示一个infowindow，

2.该信息窗口的样式无法修改，显示的内容具有局限性，虽然在2.0以后可以添加html元素，但是样式只能部分修改，比如他的背景色始终为白色。

通过寻找信息窗口里的例子，发现在1.5版本的时候，提供过一个自定窗口的例子和相关的js文件

该例子位于百度地图开发javascript 页面的开发指南>>>信息窗口页面的最底端，其中提供了一个租房信息的自定义信息窗口的例子

通过该例子可以知道我们必须一如一个含有infoBox对象的JS文件，infoBox_min.js 我们可以将其进行下载，然后根据需求进行修改相关的参数，来实现自定义的窗口，其实就相当于直接在地图上添加了dom元素而已，我们也可以自定义类似于infoBox对象，但是为了省事，我们直接对他进行编辑修改，可能是因为原理比较简单，所以百度没对其相关的参数进行详细的介绍，文档中也没有，只有一个例子，到那时不要着急，在infoBox.js 中已经有了窗口的实现过程。尤其是一些未知的样式参数我们都可以进行扩展或者修改，本人通过修改后得到了下面的信息窗口效果

可以看到其中的关闭按钮可以自定义添加图片之类的，文字的infoBox的一个特点就是内置了一些窗口的属性，比如关闭按钮：包括关闭按钮的位置，引用的图片路径；styleBox （窗口的宽度和上下位置，）；窗口显示的位置（上下左右，也可以自扩展），具体属性看js代码如图图中204行代码开始就是相关默认属性的获取定义，我们可以对他进行扩展新增属性，比如新增关闭按钮的margin或者width,然后在创建infoBox对象的时候进行设置定义。比如下方定义的opts中的closeIconZindex 就是扩展的属性：

var opts = {
                        boxStyle:{
                            width: "280px",
                            height: "195px"
                        }
                        ,enableAutoPan: true
                        ,align: INFOBOX_AT_TOP,
                        closeIconUrl:'icon/close.png',
                        closeIconMargin:'0px',
                        closeIconZIndex:1,
                        closeIconWidth:'15px'
					  
					}
var html="<div class='modal' style='height: 120px;width:280px'>" +
                        "<div class='title'><p>"+item.projectname+"</p></div>" +
                        "<a href=''><span class='xq'>详情</span></a>"+
                        "<div><table>\n" +
                        "    <tr><td >塔机："+item.towersum+" </td><td>报警："+item.td_bj_num+"</td><td >未监控："+twjk+"</td></tr>\n" +
                        "    <tr><td >升降机："+item.liftsum+" </td><td>报警："+item.sjj_bj_num+"</td><td >未监控："+lwjk+"</td></tr>\n" +
                        "    <tr><td >配电箱："+item.pdxsum+" </td><td>报警："+item.pdx_bj_num+"</td><td >未监控："+pwjk+"</td></tr>\n" +
                        "</table></div></div>";
                    var infoWindow =  new BMapLib.InfoBox(map,html,opts);

代码1

在上方infoBox.js的204后面的代码中进行的添加该属性this._opts.closeIconZIndex=d.closeIconZIndex||1,即可，同理可以扩展其他的属性。

在代码1中的var html的元素的样式即是自定义的样式，且不会出现依然为白色背景色的情况。

百度地图 javascript api自定义信息窗口

猜你喜欢