<!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>
<style type="text/css">
.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:700px;height:500px;position:fixed;top:20%;background:#fff;z-index:3;left:30%;}
.close{
position:absolute;
top:0;
right:0;
cursor:pointer;
}
body, html{width: 100%;height: 100%;overflow: hidden;margin:10;}
#trafficmapss {width: 50%;height: 100%;overflow: hidden;zoom:1;position:relative;}
</style>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=76E9FE0AA1Bef919352dd1f37240e1a3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.click1').click(function(){
$('.bg').fadeIn(200);
$('.content').fadeIn(400);
});
$('.bg').click(function(){
$('.bg').fadeOut(800);
$('.content').fadeOut(800);
});
$('.close').click(function(){
$('.bg').fadeOut(800);
$('.content').fadeOut(800);
});
});
</script>
</head>
<body style="height:2000px;">
<div class="click1">效果增强版的</div>
<div class="bg"></div>
<div class="content"><div id="trafficmap" style="height:100%;"></div></div>
<div class="close">×</div>
</body>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('trafficmap');
var poi = new BMap.Point(116.307852,40.057031);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度 大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
'</div>';
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title : "百度大厦", //标题
width : 290, //宽度
height : 105, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(poi); //创建marker对象
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地图中添加marker
searchInfoWindow.open(marker); //在marker上打开检索信息串口
</script>
</html>
------解决方案--------------------
可以用visibility: hidden来实现隐藏。