百度地图自定义信息窗(基于BMapLib.InfoBox)

最新推荐文章于 2023-04-12 13:15:48 发布

wml00000

最新推荐文章于 2023-04-12 13:15:48 发布

阅读量1.2w

点赞数 3

分类专栏：随笔文章标签：百度地图自定义信息窗 InfoBox Overlay

本文链接：https://blog.csdn.net/wml00000/article/details/85122011

版权

随笔专栏收录该内容

46 篇文章 2 订阅

订阅专栏

需求分析：

现在我想要一个好看点的信息窗，百度JS API自带的那个InfoWindow的样式太难看了，又不太好改，我想自己搞一个。

思考过程：

自己搞是不可能搞的，就只能抄一抄才能维持得了生活。你还别说，这哥们的思路可以：https://blog.csdn.net/qq_35923749/article/details/77785612 信息窗其实也是继承的OverLay类，自己搞一个Overlay不就可以了。突然我又发现了另外一篇博客：https://blog.csdn.net/qq_26991807/article/details/80764647 原来百度有提供的类库啊，直接用不就行了，这事办的。

效果图：

看着是有那么点意思啊，那个小三角是通过CSS控制的，参考地址：CSS为div添加尖角样式

主要代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:100%;}
    .infoBoxContent{
      margin:20px;
    }
    .infoBoxContent button{
      background-color: #008CBA;
      border: none;
      color: white;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 16px;
      width: 120px;
    }
    .infoBoxContent h3{
      color: white;
    }
    .infoBoxContent p{
      color:white;
    }
    .infoBoxContent:before {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-top-color: #333333;
      position: absolute;
      left: 50%;
      top: 100%;
      margin-left: -20px;
    }
  </style>
  <title>自定义弹窗</title>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1H8Dhi2pGmOMYbN4EcaAGr1rv8f7Gmjz"></script>
  <script type="text/javascript" src="lib/InfoBox.js"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.setMapStyle({style:'midnight'});
  var point = new BMap.Point(116.417854,39.921988);
  var marker = new BMap.Marker(point);  // 创建标注
  map.addOverlay(marker);              // 将标注添加到地图中
  map.centerAndZoom(point, 15);
  var html = "<div class='infoBoxContent '><h3>哈哈哈公司</h3><hr /><div><p>所属部门：研发部门</p>" +
    "<p>主要工作：制造BUG</p><div align=\"center\"><button>我是按钮</button></div></div></div>";
  var infoBox = new BMapLib.InfoBox(map,html,{
    boxStyle:{
      opacity: "0.8",
      background: "#333333",
      width: "250px",
      height: "200px"
    },
    closeIconUrl:"lib/close.png",
    closeIconMargin: "1px 1px 0 0",
    enableAutoPan: true,
    align: INFOBOX_AT_TOP
  });
  marker.addEventListener("click", function(){
    infoBox.open(marker);
    //开启信息窗口
  });

</script>

源代码下载地址：https://download.csdn.net/download/wml00000/10864496

wml00000

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
16
评论
百度地图自定义信息窗(基于BMapLib.InfoBox)

需求分析：现在我想要一个好看点的信息窗，百度JS API自带的那个InfoWindow的样式太难看了，又不太好改，我想自己搞一个。思考过程：自己搞是不可能搞的，就只能抄一抄才能维持得了生活。你还别说，这哥们的思路可以：https://blog.csdn.net/qq_35923749/article/details/77785612 信息窗其实也是继承的OverLay类，自己搞一个...
复制链接

扫一扫