百度地图点击覆盖物，显示信息框js代码

最新推荐文章于 2023-09-11 16:02:47 发布

BAOXFEI

最新推荐文章于 2023-09-11 16:02:47 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： java web

本文链接：https://blog.youkuaiyun.com/baoxiaofeicsdn/article/details/50449606

java web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种基于BMap的网页地图应用，通过获取站点信息并将其展示在地图上，实现站点编号、归还与借出数目显示，并提供点击交互以查看详细信息。

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

var map;
	$(document).ready(function(){	
  		//++当文档载入时执行function函数里的代码
  		map = new BMap.Map("container");         
  		var point = new BMap.Point(121.577382, 29.874545);  				//++江东区中心的坐标
  		map.centerAndZoom(point, 15);									    //++设置为中心点
  		
  		opts = {
					width : 200,     // 信息窗口宽度
					height: 80,     // 信息窗口高度
					title : "站点信息" , // 信息窗口标题
					enableMessage:true//设置允许信息窗发送短息
		};
  		$.getJSON("./GetStationPlaceServlet",function(json){
  			alert(json);
  			for(var i=0;i<json.length;i++){
  				var obj1 = eval(json);
  				alert(obj1[0].StationId);
  	  			var marker = new BMap.Marker(new BMap.Point(obj1[i].Stationlon,obj1[i].Stationlat)); // 创建标注
  	  			var content = "站点编号:  " + obj1[i].StationId +"<br /> "
  	  						+ "归还数目:	 " + obj1[i].StationReturnNum  +"<br /> "
  	  						+ "借出数目: " +  obj1[i].StationLendNum  +"<br /> ";
  	  			map.addOverlay(marker);               //将标注添加到地图中
  	  			addClickHandler(content,marker);
  	  		}
  		}); 		
	});
	//++
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
		openInfo(" "+content,e)});
	}
	//++
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); 				 //开启信息窗口
	}