百度地图地标信息循环添加被覆盖解决方案

前些天一朋友让帮忙解决一个程序问题发过来一看是百度地图覆盖层的信息出现覆盖现象

大概一看未发现明显的逻辑覆盖错误，也有些困惑。以前弄过谷歌百度的不熟悉

搜索了下百度地图出现信息窗体信息被覆盖现象还不少网上说了几种解决方法：外出单独定义，参数方法传递

均试过但结果不乐观

继续搜索了相关资料找到解决方案：

js (function(){})(e) 这是一个闭包，立即运行程序，带e参数更好些，每次就不用再从window对象里查找。不污染全局变量

(function( $, undefined ) {})(jQuery); 同理参考：http://www.cnblogs.com/xingmeng/archive/2012/11/02/2750992.html

以下贴出静态页代码供参考：

<!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">
*{ margin:0 auto; padding:0}
body{ padding-top:50px;}
#mapContainer{ width:600px; height:500px; border:1px solid #CCC;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>

<body>
<div id="mapContainer">
</div>
</body>
<script type="text/javascript">
//企业标注、展示数据
var company=[{"id":1,"point":"116.404234,39.913951","name":"海大科技","desc":"企业描述信息！","mylogo":"images/003.jpg"},{"id":2,"point":"116.418463,39.921809","name":"新记传媒","desc":"企业描述信息！","mylogo":"images/003.jpg"},{"id":3,"point":"116.406534,39.921367","name":"东方不败","desc":"企业描述信息！","mylogo":"images/003.jpg"}];
//初始化地图
var map=new BMap.Map("mapContainer");
var point=new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,15);

//展示标注
for(var i=0;i<company.length;i++)
{
	var strs=company[i].point.split(",");
	var marker=new BMap.Marker(new BMap.Point(strs[0],strs[1]));
	map.addOverlay(marker);
	
	//信息展示
/*************以下代码均会出现地标信息被覆盖现象***********
//	//var infoWindow = addInfo(getInfoContent(company[i].name,company[i].desc,company[i].mylogo),{width:400}); 
//	var infoWindow = new BMap.InfoWindow(getInfoContent(company[i].name,company[i].desc,company[i].mylogo),{width:400});
//	marker.addEventListener("click", function(e){this.openInfoWindow(infoWindow,e.point);});
******************************************************/

//js (function(){})(e) 这是一个闭包，立即运行程序，带e参数更好些，每次就不用再从window对象里查找。(function( $, undefined ) {})(jQuery); 同理 参考：http://www.cnblogs.com/xingmeng/archive/2012/11/02/2750992.html
<!--正常运行代码-->
	(function(){
	    //var infoWindow = addInfo(getInfoContent(company[i].name,company[i].desc,company[i].mylogo),{width:400}); 此种方式也可以成功
	    var infoWindow = new BMap.InfoWindow(getInfoContent(company[i].name,company[i].desc,company[i].mylogo),{width:400});
	    marker.addEventListener("click", function(e){this.openInfoWindow(infoWindow,e.point);});
	})()
<!--正常运行代码-->

}

//返回显示层
function getInfoContent(name,desc,mylogo){
	return "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+name+"</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='"+mylogo+"' width='139' height='104' title='"+name+"'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+desc+"</p>" + 
"</div>";
}

//网上有文章说对象提取到方法来可以解决覆盖现象, 测试不能通过
function addInfo(info){  
    var iw = new BMap.InfoWindow(info);  
    return iw;
}  
</script>
</html>

百度地图 地标信息循环添加被覆盖 解决方案

猜你喜欢

百度地图地标信息循环添加被覆盖解决方案