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

最新推荐文章于 2020-11-28 13:22:32 发布

weixin_34015860

最新推荐文章于 2020-11-28 13:22:32 发布

阅读量176

点赞数

文章标签： javascript xhtml ViewUI

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

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;
}

weixin_34015860

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Javascript Demo】遮罩层和百度地图弹出层简单实现

其实想做的就是显示百度地图的弹出层，现在已经简单实现了。示例和代码如下，点击按钮可以看到效果：1.示例: 2.代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti...
复制链接

扫一扫