百度地图自定义窗口标注

小灰灰 2022-12-07 01:21 308阅读 0赞

最近做个项目,用到了地图,要在地图上显示车辆的时时信息,页面效果![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70][]

,但是在做页面的过程中,遇到那个箭头问题,百度了有的说是是个角要隐藏了......要么自己写,最好找到了这个InfoBox.js

参考 :  简单的 用百度示例的这个就可以 [http://lbsyun.baidu.com/jsdemo.htm\#webgl1\_4][http_lbsyun.baidu.com_jsdemo.htm_webgl1_4]  (如果地图背景要改变的话这个就不行了)

JavaScript 开源库: [https://lbsyun.baidu.com/index.php?title=open/library][https_lbsyun.baidu.com_index.php_title_open_library]

<!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" />
    
      <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>
    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
        font-size: 12px;
      }
    
      #allmap {
        width: 100%;
        height: 100%;
      }
    
      #win-div {
        width: 261px;
        height: 231px;
        border: 1px solid #06D6DB;
        background: #0A2A35;
        margin: 0 auto;
      }
    
      #win-div .win_title {
        font-size: 16px;
        font-weight: 600;
        color: #06D6DB;
        padding: 0px 12px;
       
      }
    
      #win-div .con_div {
        width: 225px;
        border: 1px solid #06D6DB;
        line-height: 20px;
        padding: 10px 0px;
        text-indent: 4px;
        margin: 0 auto;
        color: #fff;
    
      }
    
      #win-div .con_div p {
        color: #fff;
        padding: 0px 10px;
      }
    
      #win-div .com_sp {
        width: 100%;
        border-top: 1px solid #06D6DB;
        margin-top: 7px;
        text-align: center;
        line-height: 30px;
        cursor: default;
        height: 24px;
      }
    
      #win-div .com_sp a #win-div .com_sp img {
        vertical-align: middle;
        cursor: pointer;
      }
    
      #win-div:before {
        content: '';
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top-color: #06D6DB;
        position: absolute;
        bottom: -36%;
        left: 50%;
        margin-left: -20px;
      }
    
      #win-div:after {
        content: '';
        width: 0;
        height: 0;
        border: 18px solid transparent;
        border-top-color: #0A2A35;
        position: absolute;
        bottom: -34%;
        left: 50%;
        margin-left: -18px;
      }
    </style>
    <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 id='win-div'  ><p class='win_title'>车辆信息</p>
                            <div class='con_div'>
                            <p>单 位: 单位</p>
                            <p>车牌号:京ABCDE </p>
                            <p>状 态: 东南</p>
                            <p>方 向: 30公里/小时</p>
                            </div>
                          </div>`;
      var infoBox = new BMapLib.InfoBox(map, html, {
        boxStyle: {
          opacity: "0.9",
          background: "#333333",
          width: "250px",
          height: "200px",
    
        },
    
        offset: new BMap.Size(0, 30),//设置偏移量
        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/z13615480737/12840819][https_download.csdn.net_download_z13615480737_12840819]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMzYxNTQ4MDczNw_size_16_color_FFFFFF_t_70]: /images/20221123/d7a943c84c0d44679ca09185de475287.png
[http_lbsyun.baidu.com_jsdemo.htm_webgl1_4]: http://lbsyun.baidu.com/jsdemo.htm#webgl1_4
[https_lbsyun.baidu.com_index.php_title_open_library]: https://lbsyun.baidu.com/index.php?title=open/library
[https_download.csdn.net_download_z13615480737_12840819]: https://download.csdn.net/download/z13615480737/12840819