【Javascript Demo】遮罩层和百度地图弹出层简单实现

秒速五厘米 2022-03-27 01:30 395阅读 0赞

其实想做的就是显示百度地图的弹出层，现在已经简单实现了。示例和代码如下，点击按钮可以看到效果：

1.示例:

2.代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
           <head>
                   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
                  <title>遮罩层和弹出层简单实现</title>
                 
                 <link href="css/css.css" rel="stylesheet" type="text/css" />
                 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=A8773a52f6d9bc0ecaea7f15acdd13e0"></script>
                  <script type="text/javascript">
                  //显示百度地图弹出层
                      function divtoshow() {
                          div_show = document.getElementById("div_show");
                          div_show.innerHTML = "<div class=\"div_show_title\"> <span class=\"div_show_font\">地图</span> <input type=\"button\" value=\"关闭\" οnclick=\"close_show();\" class=\"div_show_btn\" /> </div><div id=\"div_hotelmap\" ></div>";
                          getshade();
                          getpopup();
                          getbaidumap(116.404, 39.915);
                          div_show.style.zIndex = "100";
                          div_show.style.display = "block";
                      }
    
                      //创建遮罩层
                      function getshade() {
                          var div = document.createElement("div");
                          div.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
                          div.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
                          div.style.backgroundColor = "#000000";
                          div.style.position = "absolute";
                          div.style.opacity = 0.5;
                          div.style.left = 0;
                          div.style.top = 0;
                          div.id = "tohotelshade";
                          div.style.zIndex = 100;
                          document.getElementById("div_body").appendChild(div);
                      }
    
                      //创建用于显示百度地图的DIV
                      function getpopup() {
                          var div = document.createElement("div");
                          div.style.width = "100%";
                          div.style.height = "100%";
                          div.id = "tohotelmap";
                          document.getElementById("div_hotelmap").appendChild(div);
                      }
    
                      //清除弹出层和遮罩层
                      function close_show() {
                          var tohotelshade = document.getElementById("tohotelshade");
                          var tohotelmap = top.document.getElementById("tohotelmap");
                          var div_show = document.getElementById("div_show");
                          var div_hotelmap = document.getElementById("div_hotelmap");
                          div_show.style.zIndex = "-100";
                          tohotelshade.parentNode.removeChild(tohotelshade);
                          tohotelmap.parentNode.removeChild(tohotelmap);
                          div_show.innerHTML = "";
                      }
    
                      //通过经纬度显示百度地图
                 function getbaidumap(Longitude,Latitude) {
                  var map = new BMap.Map("tohotelmap");
                  var point = new BMap.Point(Longitude,Latitude);
                  map.centerAndZoom(point, 14);
                  var marker = new BMap.Marker(point);        // 创建标注    
                  map.addOverlay(marker);                     // 将标注添加到地图中  
                 map.addControl(new BMap.NavigationControl());
                 map.addControl(new BMap.ScaleControl());
                 map.addControl(new BMap.OverviewMapControl());
                 map.addControl(new BMap.MapTypeControl()); 
            }
                
    </script>  
     
           </head>
     
           <body>
            
           <div id="div_body">
           <input type="button" value="click" onclick="divtoshow()" />
           </div>   
    
           <div id="div_show"> </div>
      </body>
    </html>

3.样式：

#div_show
    {
        
        height: 400px;
        left: 80px;
        position: fixed;
        top: 88px;
        width: 80%;
        z-index: -100;
    }
    .div_show_title
    {
        
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#12a3f4', endColorstr='#0e86c9', GradientType=0);
        clear: both;
        display: block;
        background: rgb(14, 134, 201);
        color: #FFFFFF;
        font-weight: 700;
        position: relative;
        height: 30px;
        width: 100%;
    }
    .div_show_font
    {
        
        color: #FFFFFF;
        float: left;
        font-weight: 700;
        margin: 0.4em 0 0.4em 10px;
    }
    .div_show_btn
    {
        
        float: right;
        margin: 0.4em 10px 0.4em 0;
    }
    #div_hotelmap
    {
        
        height: 360px;
        border: 5px solid white;
    }