Advertisement

百度地图自定义弹窗样式

阅读量:
在这里插入图片描述

Css

复制代码
    .BMap_bottom {
      display: none;
    }
    .BMap_pop {
      > div,
      > img:nth-child(10) {
    display: none;
    overflow: unset;
      }
      > div:nth-child(9) {
    display: block;
    overflow: unset;
      }
      > div:nth-child(8) {
    /*display: block;*/
      }
      .BMap_top {
    display: none;
      }
      .BMap_center {
    background: transparent;
    border: none;
    position: sticky !important;
    height: 100%;
      }
    }
    .BMap_bubble_content {
      width: 400px !important;
      height: 196px !important;
      background-image: url(./img/baiduMapPopUp.png) !important;
      background-size: 100% !important;
      padding: 6px;
      .baiduPopBox {
    display: flex;
    flex-direction: column;
    color: rgb(170, 182, 249);
    padding-left: 16px;
    
    .boxTop {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 6px;
    
      .boxTop-left {
        display: flex;
        flex-direction: column;
    
        .carNO::before {
          content: '';
          width: 5px;
          height: 17px;
          position: absolute;
          top: 10px;
          left: 4px;
          background: rgb(57, 169, 195);
        }
      }
      .locusButton {
        border: none !important;
        background: none !important;
        color: rgb(58, 173, 200) !important;
        font-weight: bold;
        padding-right: 24px;
      }
    }
    .boxBottom {
      display: flex;
      flex-direction: column;
    
      span {
        line-height: 26px;
      }
    }
      }
    }
    .BMap_shadow {
      display: none;
    }

JS

复制代码
     // 弹窗
      createInfoWindow = () => {
    var opts = {
      width: 400, // 信息窗口宽度
      height: 196, // 信息窗口高度
    };
    window.showTrack = () => {
      this.showTrack();
    };
    var infoWindow = new BMap.InfoWindow(
      `<div class="baiduPopBox">
      <div class="boxTop">
      <div class="boxTop-left">
       <div class="carNO">车牌号:</div>
      <span>预警提示:</span></div>
       <input class="locusButton" type="button" value="轨迹" οnclick="showTrack()"/>
      </div>
      <div class="boxBottom">
      <span>订单号:</span>
      <span>驾驶员:</span>
      <span>用车时间:</span>
      <span>实际出发地:</span>
      <span>实际目的地:</span>
      </div>
    </div>`,
      opts
    ); // 创建信息窗口对象
    infoWindow.addEventListener('open', function(type, target, point) {
      // 窗口打开是,隐藏自带的关闭按钮
      $('.BMap_pop>img').hide();
    });
    return infoWindow; // 创建信息窗口对象
      };

全部评论 (0)

还没有任何评论哟~