百度地图 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的元素的样式即是自定义的样式,且不会出现依然为白色背景色的情况。


  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
第1章Web GIS基础 1.1GIS及相关技术的发展 1.1.1Web开发技术的发展 1.1.2GIS的发展 1.1.3Web服务的发展 1.1.4Web GIS的发展 1.2OGC的Web服务规范 1.2.1OWS服务体系 1.2.2空间信息Web服务的角色与功能 1.2.3空间信息Web服务的系统框架 1.2.4OWS中的常用服务 1.2.5服务的请求与响应 1.3REST及REST风格的Web服务 1.3.1REST中的基础知识 1.3.2REST风格的Web服务 1.3.3REST风格的Web服务实例 1.4Web GIS的组成 1.5ArcGIS Server REST风格的Web服务 1.5.1ArcGIS S erver站点的架构 1.5.2ArcGIS Server发布的服务类型 1.5.3服务发布 1.5.4Web服务的URL及元数据 1.5.5查看地图 1.5.6使用ArcGIS Server REST风格Web服务的过程 1.5.7支持的输出格式 第2章ArcGIS API for JavaScript基础 2.1ArcGIS API for JavaScript版的Hello World 2.2ArcGIS API for JavaScript与Dojo 2.2.1ArcGIS API for JavaScript的构成 2.2.2ArcGIS API for JavaScript与Dojo的关系 2.3开发与调试工具 2.3.1集成开发环境 2.3.2调试工具 2.3.3Firebug 2.3.4其他工具软件 2.4Dojo基础知识 2.4.1JavaScript对象 2.4.2函数也是对象 2.4.3模拟类与继承 2.4.4使用模块与包管理源代码 第3章页面布局设计 3.1使用布局小部件设计页面框架 3.1.1小部件与布局小部件简介 3.1.2使用面板组织页面元素 3.1.3使用容器小部件设计页面布局 3.2可移动的小部件微架构 3.2.1自定义小部件的基础知识 3.2.2内容小部件的基类实现 3.2.3可移动的框架小部件 3.2.4测试 3.3集中控制的小部件微架构 3.3.1可集中控制的框架小部件 3.3.2小部件容器 3.3.3测试 3.3.4订阅/发布模式的事件处理机制 3.4使用菜单组织功能 3.4.1菜单容器小部件 3.4.2菜单项小部件 3.4.3菜单小部件 3.4.4测试 第4章地图与图层 4.1图层操作 4.1.1图层类及其之间的继承关系 4.1.2切片地图图层 4.1.3动态地图图层 4.1.4图形图层 4.1.5带地理参考的影像图层 4.1.6 KML图层 4.2自定义图层 4.2.1自定义动态图层——热度图图层 4.2.2自定义切片地图图层——百度地图 4.2.3自定义图层——三维建筑图 4.3地图操作 4.3.1地图窗口操作 4.3.2地图属性获取 4.3.3事件处理 4.4地图参数的基本配置 4.4.1漫游与缩放动画的参数配置 4.4.2比例滚动条的参数配置 4.4.3跨域访问参数配置 4.5图层控制器 4.5.1图层控制器小部件模板 4.5.2图层控制器小部件类 4.5.3图层控制器小部件的使用 第5章空间参考系统与几何对象 5.1空间参考系统 5.1.1空间参考系统类 5.1.2参考系统转换 5.2几何对象 5.2.1几何对象类及其之间的继承关系 5.2.2几何对象的绘制 5.2.3几何对象相关的功能模块 第6章符号与图形 6.1符号 6.1.1标记符号 6.1.2线符号 6.1.3填充符号 6.1.4文本符号 6.2图形 6.2.1图形对象的构成

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值