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

百度地图api html信息窗口,百度地图 javascript api自定义信息窗口相关推荐

【python】python利用百度地图API：获取经纬度、地图撒点
本文目的: python通过百度地图API,获取所给地址的经纬度,并且在百度地图上进行撒点. 另:百度地图API功能强大,如: GPS功能(单个点沿线运动). 信息窗口示例(添加纯文字的信息窗口). ...
百度地图的两套JavaScript API
前言百度地图的有套JavaScript API:JavaScript API 和 JavaScript API GL. JavaScript API v2.0 版本开发文档: http://lbs ...
使用以下选项自定义 Enscape 窗口
Enscape自定义选项允许用户调整 Enscape 视口窗口以适应更多项目或公司特定的需求.这些可以调整的选项包括窗口的标题.图标.加载屏幕以及您想要应用于导出的任何水印.这些更改会影响任何导出的图 ...
百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
百度地图api html信息窗口,百度地图API实战
信息窗口这一小节我们将实现创建信息窗口以及点击标注出现信息窗口. 1.简介信息窗口在地图上方的浮动显示HTML内容.信息窗口可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标 ...
百度地图自定义信息窗口样式
在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
1.InfoWindow的样式,百度是没用提供直接使用的样式表的,目前都是热心网友在实际开发中自己的经验和实战总结: 2.百度提供了InfoBox富文本标签弹出框的接口,引入InfoBox.js,即可 ...
百度地图鼠标滑过marker时打开自定义信息窗口
在百度地图上实现鼠标滑过marker时打开自定义的信息窗口,当鼠标滑出marker时关闭已打开的信息窗口. 首先,需要在地图上添加一个marker,具体如下所示: $.ajax({async:fals ...
百度地图 Api v3.0 自定义信息窗体样式
一.效果图二.代码注意要先引入: <script src="http://api.map.baidu.com/api?v=3.0&ak=IN43cyju8PVLGfSNwl ...

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

百度地图api html信息窗口,百度地图 javascript api自定义信息窗口相关推荐

最新文章

热门文章