百度地图api开发一：信息窗口不能多次显示的问题

最新推荐文章于 2023-10-08 16:19:05 发布

原创最新推荐文章于 2023-10-08 16:19:05 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #BMap.Marker #BMap.InfoWindow

其它专栏收录该内容

27 篇文章

订阅专栏

在使用百度地图API开发时，遇到信息窗口只能显示一次的问题。本文介绍了两种解决方案：一是改写点击事件方法，二是升级API版本至V1.5以上，后者能有效解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔者在使用百度地图API开发时，常遇到这样一个问题，即：给标注（Maker）添加的信息窗口只能显示一次，当第二次点击时窗口不显示。

源代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:500px;height:300px;border:1px solid gray}
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">	
function init() {
	map = new BMap.Map("container");
	map.centerAndZoom(new BMap.Point(121.776817, 31.059342),15);			
	var html="Hello骨哥";
	var infoWindow = new BMap.InfoWindow(html);				
	var addr=new BMap.Marker(new BMap.Point(121.770996, 31.058476), {icon: new BMap.Icon("images/redstar.png", new BMap.Size(32, 32), {imageOffset: new BMap.Size(0, 0)})});			
	addr.infoWindow=infoWindow;
	addr.addEventListener("click", function(e){ 
	  this.openInfoWindow(e.target.infoWindow);  
	}); 
	map.addOverlay(addr);			
}
</script>
</head>    
<body onload="init();">  
	<div id="container"></div>
</body>  
</html>

运行结果如下图：

我为创建的标注addr添加了一个点击事件click，但当我第二次点击时，地图上不再显示信息窗口了。经过多番查找实验，下面给出两种解决办法：

方法一：

改写点击事件方法，代码为：

addr.addEventListener("click",function(){  
 this.openInfoWindow(infoWindow); 
});

该方法能够使信息框响应每一次的点击事件。但笔者并不建议这么写。

方法二：

第二种方法是升级百度api的版本，笔者原来使用的是V1.2版本，后来经过实验发现，当使用V1.5版本后就不再出现以上问题。