当前位置: 代码迷 >> JavaScript >> 请教下小弟我做了个弹窗div 里面放百度map 为什么小弟我百度map定位的点 不是在div的中间 而是跑到div的左上角 还有就是显示框的有关问题
  详细解决方案

请教下小弟我做了个弹窗div 里面放百度map 为什么小弟我百度map定位的点 不是在div的中间 而是跑到div的左上角 还有就是显示框的有关问题

热度:116   发布时间:2013-10-14 12:54:46.0
请问下我做了个弹窗div 里面放百度地图 为什么我百度地图定位的点 不是在div的中间 而是跑到div的左上角 还有就是显示框的问题

<!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来实现隐藏。
  相关解决方案