百度地图 - 基础学习(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配套使用，可以很好的进行位置定位以及相关信息展示。