百度地图 - 基础学习(10): 自定义信息窗口
在完成前面 百度地图 - 基础学习(9): 区域重叠面积计算及绘制重叠区域边界线 时为了进行特征点信息的标注需要用到信息标注,虽然百度地图原生api 覆盖物类提供了 InfoWindow 类,但是实际运用中发现 InfoWindow 类有限制。如下图所示:
由于同一时刻地图上只能打开一个信息窗口,这显然无法满足我这的需求。故而这里直接使用百度地图提供的另一个 自定义信息窗口工具:InfoBox
一、InfoBox类的引入
InfoBox类的引入和之前的 DrawingManager 和 GeoUtils 类似,直接 script 标签引入即可。
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
二、InfoBox类 方法的使用
InfoBox类 有哪些方法,方法有哪些参数以及如何使用,详细请参考官方文档:http://api.map.baidu.com/library/InfoBox/1.2/docs/symbols/BMapLib.InfoBox.html#constructor,此处只贴出Demo中用到的方法。
// 随机生成rgb颜色 getTandomColor() { let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); // 返回随机生成的颜色 // return "rgb(" + r + "," + g + "," + b + ")"; return `rgb(${r},${g},${b})`; }, // 设置自定义信息窗口 setInfoBox(lng, lat) { let that = this; let html = `<div>${lng}</div><div>${lat}</div>`; let infoBox = new BMapLib.InfoBox(this.mapInstance, html, { boxStyle: { background: that.getTandomColor(), width: "auto", height: "auto", marginBottom: "15px" }, enableAutoPan: true, // 是否启动自动平移功能 align: window.INFOBOX_AT_TOP // {Number}基于哪个位置进行定位,取值为[INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM] }); infoBox.open(new BMap.Point(lng, lat)); },
三、总结
自定义信息窗口工具:InfoBox,在功能上极大地拓展了信息窗口的信息展示和窗口样式的自定义。在实际开发中和定位标注Marker配套使用,可以很好的进行位置定位以及相关信息展示。
赞 (0)