700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 百度地图api html信息窗口 百度地图 javascript api自定义信息窗口

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

时间:2023-08-27 11:05:16

相关推荐

百度地图api html信息窗口 百度地图 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="

" +

"

"+item.projectname+"" +

"详情"+

"

\n" +

"

塔机:"+item.towersum+"报警:"+item.td_bj_num+"未监控:"+twjk+"\n" +

"

升降机:"+item.liftsum+"报警:"+item.sjj_bj_num+"未监控:"+lwjk+"\n" +

"

配电箱:"+item.pdxsum+"报警:"+item.pdx_bj_num+"未监控:"+pwjk+"\n" +

"";

var infoWindow = new BMapLib.InfoBox(map,html,opts);

代码1

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。