百度地图之循环标注

最新推荐文章于 2023-11-15 09:15:39 发布

原创最新推荐文章于 2023-11-15 09:15:39 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #标注问题 #循环标注

地图API 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在使用百度地图API时遇到的标注问题及其解决方案。通过为每个标注添加特定的信息窗口，确保了所有标注内容正确显示，避免了内容被覆盖的问题。

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

在使用百度地图api过程中，需要给相应的点添加标注，当我将获取的数据使用循环的方式标注出来后，问题就出现了，

所有的标注内容一样，被最后的数据给覆盖了，查到许多的解决方案，其中我认为更符合我的需求的拿出来分享。

答案源于这里：戳吧！

直接上标注代码：

     function addMark(){
            var json = ${map};//后台数据
            var opts = {
			  width : 250,    
			  height: 120,     
			  title : "船舶信息" , 
			  enableMessage:false
	       }
            for(var i=0;i<json.length;i++){
                var content =
				"<div class='metle'><table>"+
			        "<tr><td>经度:"+json[i].longitude+"</td></tr>"+
			        "<tr><td>纬度:"+json[i].latitude+"</td></tr>"+
			        "<tr><td>时间:"+json[i].utc+"</td></tr>"+
				"</table></div>";                
                var myIcon = new BMap.Icon("${base}/lib/images/1.png", new BMap.Size(15,15));//自定义icon
                var infoWindow = new BMap.InfoWindow(content,opts);//创建信息窗口
                var mark = new BMap.Marker(new BMap.Point(json[i].longitude,json[i].latitude),{icon:myIcon});  // 创建标注
                mark.infoWindow = infoWindow;//关键点！给当前标注添加属性保存window信息
		mark.addEventListener("mouseover",function(e){ this.openInfoWindow(e.target.infoWindow);});//回调对应的信息
	        map.addOverlay(mark);
            }
    }

至于addMark()函数直接放在initMap()中调用。