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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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=\"关闭\" onclick=\"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:;
position: relative;
height: 30px;
width: 100%;
}
.div_show_font
{
color: #FFFFFF;
float: left;
font-weight:;
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;
}