登录 主页

百度地图实现固定点标记弹窗并且不能关掉这个窗口(但是可以点击右上角的x来进行关闭)

2023-09-25 03:44PM

<style type="text/css">
   body, html, #allmap {
     width: 100%;
     height: 100%;
     overflow: hidden;
     margin: 0;
    }
   .BMap_bubble_pop {
     padding: 0px 8px;
     position: absolute;
     cursor: default;
     left: 484px;
     top: 9px;
     width: 248px;
     height: 264px;
     color: #fff !important;
     box-shadow: 0px 3px 6px -4px rgba(0,0,0,0.12), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 9px 28px 8px rgba(0,0,0,0.05);
     opacity: 1;
     background: #001c2e !important;
     opacity: 1;
     border: 1px solid #20539d !important;
     border-radius: 20px !important;
   }
  .BMap_bubble_title {
    line-height: 21px !important;
    overflow: hidden;
    white-space: nowrap;
    width: 248px;
     color: #fff !important;
     margin-top: 35px;
     height: 46px !important;
     font-size: 16px;
     height: 46px;
     font-size: 16px;
     margin-left: 10px !important;
  }
  .BMap_bubble_content {
    font-size: 15px;
    line-height: 24px;
    position: absolute;
    top: 2px;
    width: 236px;
    height: 264px;
    overflow: auto;
    margin-top: 40px;
    margin-left: 10px;
    color: #a8d6ff !important;
    margin-top: 0px !important;
  }

// 主要是增加这里代码,我把这个地图小箭头的图片给它设置为了空,使它不显示; 也可以根据自己的需求添加其他图片

 img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"] {
    content: url('');
  }

</style>
 <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
 <body>
 <div id="allmap"></div>
 </body>
 <script type="text/javascript">
  // GL版命名空间为BMapGL
  // 按住鼠标右键,修改倾斜角和角度
  var map = new BMapGL.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(87.617733, 43.792818), 11);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  map.setMapStyleV2({
     styleId: '你的个性化地图样式ID'
  });
 // 添加固定的点标记和弹窗
     (function() {
       var fixedPoint = new BMapGL.Point(85.617730, 43.792813);
       var fixedMarker = new BMapGL.Marker(fixedPoint);
       map.addOverlay(fixedMarker);
       var fixedOpts = {
         width: 300,
         height: 233,
         title: "新疆新联农产品有限公司001号储备仓<br/>", // 信息窗口标题

         // 在固定的点标记和弹窗增加这一行代码

         enableCloseOnClick: false

      };
      var fixedInfoWindow = new BMapGL.InfoWindow("物资名称:面粉</br>储备数量:3000吨</br>联系人:周利民<br/>联系电话:13682509276<br/> 企业类型:生产加工企业<br/>\
         <a href='/material_reserves/2' style='text-decoration: none; color: #01c2ff; font-size: 17px; text-align: center; margin: 15px 40px; width: 180px; height: 40px; display: block;\
         background: #0b1c32; border: 1px solid #3181b9; border-radius: 30px;line-height: 195%;'>点击查看物资报表\
         <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-right-fill' viewBox='0 0 16 16'>\
         <path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/> </svg></a>", fixedOpts);

    // 并且删除了点标记添加点击事件,直接开启信息窗口

     map.openInfoWindow(fixedInfoWindow, fixedPoint);
   })();

在浏览器打开,就可以发现这个弹窗是点击空白地方关不掉的,但是可以通过点击有上角的 x 来关闭这个弹窗

 

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论